:nth-last-child()
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>
(en-US)s (inteiros).
Sintaxe formal
Error: could not find syntax for this item
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 com navegadores
Estamos convertendo nossos dados de compatibilidade para o formato JSON.
Esta tabela de compatibilidade ainda usa o formato antigo,
pois ainda não convertemos os dados que ela contém.
Descubra como você pode ajudar! (en-US)
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.