Pseudoclasse nth-last-of-type
A pseudoclasse nth-last-of-type seleciona
um elemento que é o enésimo descendente
do tipo especificado, contando a partir do final.
Comporta-se de forma semelhante a nth-of-type,
mas a contagem é feita a partir do final.
Sintaxe
seletor:nth-last-of-type(número | odd | even | expressão) {
}
Valores
| Valor | Descrição |
|---|---|
| número |
Um número positivo a partir de 1.
Especifica o número do elemento ao qual queremos
nos referir. A numeração dos elementos começa em 1.
|
odd |
Elementos ímpares. |
even |
Elementos pares. |
| expressão |
É possível criar expressões especiais com a letra n,
que representa todos os números inteiros de zero (não de um)
até o infinito. Assim, 2n significa todos os números pares
(a partir do segundo).
Como entender isso? Substituímos n sequencialmente
por números a partir de 0 e assim por diante: se n = 0, então 2n resultará em 0 -
esse elemento não existe (a numeração dos elementos começa em 1),
se n = 1, então 2n resultará em 2 - o segundo elemento, se n = 2,
2n resulta em 4 - o quarto elemento. Se escrevermos 3n - isso
será cada terceiro elemento (a partir do terceiro), e assim por diante.
|
Exemplo
Vamos encontrar o h2 que é o 2º h2
no elemento pai, contando a partir do final:
<div>
<h2>título</h2>
<p>parágrafo</p>
<h2>título</h2>
<p>parágrafo</p>
<h2>título</h2>
<p>parágrafo</p>
<h2>título</h2>
<p>parágrafo</p>
<h2>título</h2>
<p>parágrafo</p>
<h2>título</h2>
<p>parágrafo</p>
<h2>título</h2>
<p>parágrafo</p>
</div>
h2:nth-last-of-type(2) {
color: red;
}
:
Exemplo
Vamos encontrar todos os h2 pares, contando a partir do final:
<div>
<h2>título</h2>
<p>parágrafo</p>
<h2>título</h2>
<p>parágrafo</p>
<h2>título</h2>
<p>parágrafo</p>
<h2>título</h2>
<p>parágrafo</p>
<h2>título</h2>
<p>parágrafo</p>
<h2>título</h2>
<p>parágrafo</p>
<h2>título</h2>
<p>parágrafo</p>
</div>
h2:nth-last-of-type(even) {
color: red;
}
:
Exemplo
Vamos encontrar todos os h2 ímpares, contando a partir do final:
<div>
<h2>título</h2>
<p>parágrafo</p>
<h2>título</h2>
<p>parágrafo</p>
<h2>título</h2>
<p>parágrafo</p>
<h2>título</h2>
<p>parágrafo</p>
<h2>título</h2>
<p>parágrafo</p>
<h2>título</h2>
<p>parágrafo</p>
<h2>título</h2>
<p>parágrafo</p>
</div>
h2:nth-last-of-type(odd) {
color: red;
}
:
