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 <complex-selector-list> ]? )where
<nth> = <an-plus-b> | even | odd
<complex-selector-list> = <complex-selector>#where
<complex-selector> = <compound-selector> [ <combinator>? <compound-selector> ]*
where
<compound-selector> = [ <type-selector>? <subclass-selector>* [ <pseudo-element-selector> <pseudo-class-selector>* ]* ]!
<combinator> = '>' | '+' | '~' | [ '||' ]where
<type-selector> = <wq-name> | <ns-prefix>? '*'
<subclass-selector> = <id-selector> | <class-selector> | <attribute-selector> | <pseudo-class-selector>
<pseudo-element-selector> = ':' <pseudo-class-selector>
<pseudo-class-selector> = ':' <ident-token> | ':' <function-token> <any-value> ')'where
<wq-name> = <ns-prefix>? <ident-token>
<ns-prefix> = [ <ident-token> | '*' ]? |
<id-selector> = <hash-token>
<class-selector> = '.' <ident-token>
<attribute-selector> = '[' <wq-name> ']' | '[' <wq-name> <attr-matcher> [ <string-token> | <ident-token> ] <attr-modifier>? ']'where
<attr-matcher> = [ '~' | | | '^' | '$' | '*' ]? '='
<attr-modifier> = i | s
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
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.