A pseudo-classe CSS :nth-last-child()
seleciona um ou mais elementos com base em sua posição entre um grupo de elementos-irmãos, contando a partir do último.
/* Seleciona todo quarto elemento em qualquer grupo de irmãos, contando do último para o primeiro */ :nth-last-child(4n) { color: lime; }
Nota: Essa pseudo-classe é essencialmente o mesmo que usar :nth-child
, porém conta os itens de trás para a frente, e não do início para o final.
Sintaxe
A pseudo-classe nth-last-child
é especificada com um único argumento, que representa o padrão para elementos correspondentes, contando do final.
Valores chave
odd
- Representa elementos cuja posição numérica em uma série de irmãos é ímpar: 1, 3, 5, etc., contando do final.
even
- Representa elementos cuja posição numérica em uma série de irmãos é par: 2, 4, 6, etc., contando do final.
Notação funcional
<An+B>
- Representa elementos cuja posição numérica em uma série de irmãos corresponde ao padrão
An+B
, para cada valor den
que seja um número inteiro positivo ou zero. O índice do primeiro elemento, contando do final, é1
. Os valoresA
eB
devem ambos ser<integer>
s (inteiros).
Sintaxe formal
:nth-last-child( <nth> [ of <selector># ]? )
Exemplos
Seletores de exemplo
tr:nth-last-child(odd)
outr:nth-last-child(2n+1)
- Representa as linhas ímpares de uma tabela HTML: 1, 3, 5, etc., contando do final.
tr:nth-last-child(even)
outr:nth-last-child(2n)
- Representa as linhas pares de uma tabela HTML: 2, 4, 6, etc., contando do final.
:nth-last-child(7)
- Representa o sétimo elemento, contando do final.
:nth-last-child(5n)
- Representa elementos 5, 10, 15, etc., contando do final.
:nth-last-child(3n+4)
- Representa elementos 4, 7, 10, 13, etc., contando do final.
:nth-last-child(-n+3)
- Representa os últimos três elementos em um grupo de irmãos.
p:nth-last-child(n)
- Representa cada elemento
<p>
em um grupo de irmãos. Isso é o mesmo que um simples seletorp
. p:nth-last-child(1)
oup:nth-last-child(0n+1)
- Representa cada
<p>
que seja o primeiro elemento em um grupo de irmãos, contando do final. Isso é o mesmo que o seletor:last-child
.
Exemplo de tabela
HTML
<table> <tbody> <tr> <td>Primeira linha</td> </tr> <tr> <td>Segunda linha</td> </tr> <tr> <td>Terceira linha</td> </tr> <tr> <td>Quarta linha</td> </tr> <tr> <td>Quinta linha</td> </tr> </tbody> </table>
CSS
table { border: 1px solid blue; } /* Seleciona os últimos três elementos */ tr:nth-last-child(-n+3) { background-color: pink; }
Resultado
Especificações
Especificação | Status | Comentário |
---|---|---|
Selectors Level 4 The definition of ':nth-last-child' in that specification. |
Rascunho atual | Elementos correspondentes não precisam ter um elemento-pai. |
Selectors Level 3 The definition of ':nth-last-child' in that specification. |
Recomendação | Definição inicial. |
Compatibilidade de browser
We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!
Funcionalidade | Chrome | Edge | Firefox (Gecko) | Internet Explorer | Opera | Safari |
---|---|---|---|---|---|---|
Suporte básico | 4 | (Yes) | 3.5 (1.9.1) | 9.0 | 9.5 | 3.2 |
Não precisa de pai | 57 | ? | 51 (51)[1] | ? | 44 | ? |
Funcionalidade | Android Webview | Chrome for Android | Edge | Firefox Mobile (Gecko) | IE Mobile | Opera Mobile | Safari Mobile |
---|---|---|---|---|---|---|---|
Suporte básico | (Yes) | (Yes) | (Yes) | 1.0 (1.9.1) | 9.0 | 10 | 3.2 |
Não precisa de pai | 57 | 57 | ? | 51.0 (51)[1] | ? | 44 | ? |
[1] Ver bug 1300374.