:nth-last-child()
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.
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
Notação funcional
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
Specification |
---|
Selectors Level 4 # nth-last-child-pseudo |
Compatibilidade com navegadores
BCD tables only load in the browser