Pseudoclasse nth-last-child
A pseudoclasse nth-last-child seleciona
um elemento que é o enésimo filho do
pai, contando a partir do final. Comporta-se
de forma análoga a nth-child,
só que a contagem é feita a partir do final.
Sintaxe
seletor:nth-last-child(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 compor expressões especiais com a letra n,
que representa todos os números inteiros de zero (não de um)
ao 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 (numeração de 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
Neste exemplo, tornaremos vermelha a cor
do li que é o 4º filho a partir do final
do seu pai:
<ul>
<li>item da lista</li>
<li>item da lista</li>
<li>item da lista</li>
<li>item da lista</li>
<li>item da lista</li>
</ul>
li:nth-last-child(4) {
color: red;
}
:
Exemplo
Agora, tornaremos vermelhos todos os
li pares a partir do final:
<ul>
<li>item da lista</li>
<li>item da lista</li>
<li>item da lista</li>
<li>item da lista</li>
<li>item da lista</li>
</ul>
li:nth-last-child(even) {
color: red;
}
:
Exemplo
Agora, tornaremos vermelhos todos os ímpares a
partir do final li:
<ul>
<li>item da lista</li>
<li>item da lista</li>
<li>item da lista</li>
<li>item da lista</li>
<li>item da lista</li>
</ul>
li:nth-last-child(odd) {
color: red;
}
:
Exemplo
Agora, tornaremos vermelhos cada terceiro
li a partir do final:
<ul>
<li>item da lista</li>
<li>item da lista</li>
<li>item da lista</li>
<li>item da lista</li>
<li>item da lista</li>
</ul>
li:nth-last-child(3n) {
color: red;
}
:
