English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
:nth-último-of-type(an+b) Este pseudo-classe CSS coincide com aqueles que têm um an+b-1 elementos do mesmo tipo, onde n é um valor positivo ou zero. Basicamente é como :nth-of-type, mas ele começa a contar do final em vez do começo.
Manual completo de seletores CSS
de2preeencher a cor de fundo de elementos do mesmo tipo:
!DOCTYPE html
<html>
<head>
<meta charset="utf-8">
<title>Tutorial básico(oldtoolbag.com)</title>
<style>
span:nth-último-of-type(2) {
fundo-cor: lime;
}
</style>
</head>
<body>
<div>
<span>Este é um intervalo.</span>
<span>Este é outro intervalo.</span>
<em>Destaque.</em>
<span>Uau, esse intervalo ficou nebuloso! </span>
<strike>Isso foi removido.</strike>
<span>Este é o último intervalo.</span>
</div>
</body>
</html>Teste e veja ‹/›:nth-último-of-type( <nth> ) onde <nth> = <an-plus-b> | even | odd
:nth-último-of-type(n)seletor combina o elemento irmão de mesmo tipo de último nível n.
n Pode ser um número, uma palavra-chave ou uma fórmula.
Dica:Veja também::nth-último-child()O seletor combina o elemento pai com o elemento filho estrutural de último nível n.
Os números na tabela representam a primeira versão do navegador que suporta essa propriedade.
| seletor | |||||
|---|---|---|---|---|---|
| :nth-último-of-type() | 4.0 | 9.0 | 3.5 | 3.2 | 9.6 |
O ímpar e o par podem ser usados como palavras-chave para combinar elementos filhos cujo índice é ímpar ou par.
Aqui, especificamos duas cores de fundo diferentes para os elementos p ímpares e p pares em ordem inversa:
!DOCTYPE html
<html>
<head>
<meta charset="utf-8">
<title>Tutorial básico(oldtoolbag.com)</title>
<style>
p:nth-último-of-type(odd)
{
background:#ff0000;
}
p:nth-último-of-type(even)
{
background:#0000ff;
}
</style>
</head>
<body>
<div>
<p>Este é o primeiro parágrafo。</p>
<p>Este é o segundo parágrafo。</p>
<p>Este é o terceiro parágrafo。</p>
<p>Este é o quarto parágrafo。</p>
</div>
</body>
</html>Teste e veja ‹/›Usando a fórmula (an+ b）.Descrição: a representa o tamanho de um ciclo, N é um contador (começando em 0), e b é o deslocamento.
Aqui, especificamos duas cores de fundo diferentes para os elementos p cujos índices são3O elemento p cujo índice é múltiplo de X especifica a cor de fundo:
!DOCTYPE html
<html>
<head>
<meta charset="utf-8">
<title>Tutorial básico(oldtoolbag.com)</title>
<style>
p:nth-último-of-type(3n+0)
{
background:#ff0000;
}
</style>
</head>
<body>
<h1>Este é o título</h1>
<p>primeiro parágrafo。</p>
<p>segundo parágrafo。</p>
<p>terceiro parágrafo。</p>
<p>quarto parágrafo。</p>
<p>quinto parágrafo。</p>
<p>sexto parágrafo。</p>
<p>setimo parágrafo。</p>
<p>oitavo parágrafo。</p>
<p>Nono parágrafo。</p>
<p><b>Atenção:</b> Internet Explorer 8 e navegadores de versões mais antigas não suportam :nth-último-seletor child().</p>
</body>
</html>Teste e veja ‹/›