CSS :nth-last-child Pseudo Classe
A pseudo-classe CSS :nth-last-child() seleciona elementos a partir do último. Aprenda a usar com exemplos práticos.
A pseudo-classe :nth-last-child() combina elementos com base na posição deles dentro de um grupo de irmãos, contando a partir do último elemento em direção ao início. É o espelho de :nth-child(): em vez de contar do início, conta a partir do final.
Isso a torna a ferramenta ideal quando você precisa trabalhar com a distância de um elemento ao final de uma lista — por exemplo, estilizar o último item, os últimos itens, ou "todos os itens exceto o último." Como a contagem começa pela base, a regra continua funcionando mesmo quando você adiciona ou remove itens no início da lista.
O argumento entre parênteses pode ser um número simples, uma palavra-chave (odd / even) ou uma fórmula An+B.
Diferença em relação a :nth-child()
Ambas as pseudo-classes contam entre irmãos, mas em direções opostas:
:nth-child(1)corresponde ao primeiro irmão.:nth-last-child(1)corresponde ao último irmão (equivalente a:last-child).
Portanto, li:nth-last-child(2) sempre seleciona o penúltimo item da lista, independentemente de quantos itens existam antes dele. Use :nth-last-child() quando a estilização estiver ancorada no final do grupo em vez do início.
Nota:
:nth-last-child()conta todos os elementos irmãos, independentemente do tipo. Se você precisar contar apenas irmãos do mesmo tipo de elemento (a partir do final), use:nth-last-of-type().
Valores de palavra-chave
odd
Seleciona elementos com índices ímpares (por exemplo, 1, 3, 5, 7, etc.).
even
Seleciona elementos com índices pares (por exemplo, 2, 4, 6, 8, etc.).
Notação funcional
<An+B>
Seleciona elementos cuja posição numérica (contada a partir do último irmão) corresponde ao padrão An+B, avaliado para cada valor inteiro não negativo de n (0, 1, 2, …). O índice do último elemento é 1. A e B devem ser inteiros e podem ser negativos: A define o passo (comprimento do padrão) e B define o deslocamento.
Algumas fórmulas comuns, considerando a direção da contagem:
| Fórmula | Corresponde (contando a partir do final) |
|---|---|
2n | Cada 2º elemento (even) |
2n+1 | Um elemento de cada dois, começando pelo último (odd) |
3 | Apenas o 3º elemento a partir do final |
n+3 | O 3º elemento a partir do final e tudo antes dele |
-n+3 | Apenas os últimos 3 elementos |
Versão
Sintaxe
Sintaxe CSS :nth-last-child
selector:nth-last-child() {
css declarations;
}Exemplo do seletor :nth-last-child():
Exemplo CSS :nth-last-child
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
p:nth-last-child(1) {
background-color: #1c87c9;
color: #fff;
}
</style>
</head>
<body>
<h2>:nth-last-child selector example</h2>
<p>Lorem ipsum is simply dummy text...</p>
<p>Lorem Ipsum is simply dummy text...</p>
</body>
</html>Aqui, p:nth-last-child(1) seleciona o parágrafo que é o último filho de seu pai, de modo que apenas o segundo parágrafo recebe o fundo azul.
Exemplo das palavras-chave "odd" e "even":
Exemplo de código CSS :nth-last-child
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
p:nth-last-child(odd) {
background: #1c87c9;
color: #eee;
}
p:nth-last-child(even) {
background: #666;
color: #eee;
}
</style>
</head>
<body>
<h2>:nth-last-child selector example</h2>
<p>Paragraph 1</p>
<p>Paragraph 2</p>
<p>Paragraph 3</p>
</body>
</html>Contando a partir do final, o Parágrafo 3 está na posição 1 (ímpar), o Parágrafo 2 na posição 2 (par) e o Parágrafo 1 na posição 3 (ímpar). Portanto, os Parágrafos 1 e 3 utilizam a regra odd e o Parágrafo 2 utiliza a regra even.
Exemplo de :nth-last-child() com a tag <table>:
Nota: Para que tr seja selecionado, ele deve ser filho direto de tbody ou table.
Exemplo de código CSS :nth-last-child com tag table
<!DOCTYPE html>
<html>
<head>
<style>
table {
border: 1px solid #8EBF41;
border-spacing: 10px;
font-family: sans-serif;
}
table tr {
background-color: #cccccc;
}
/* Selects the last three elements */
tr:nth-last-child(-n+3) {
background-color: #8EBF41;
}
table tr td {
padding: 10px;
}
/* Selects every element starting from the second to last item */
tr:nth-last-child(n+2) {
color: #ffffff;
}
/* Select only the last second element */
tr:nth-last-child(2) {
font-weight: 900;
}
</style>
</head>
<body>
<h2>:nth-last-child selector example</h2>
<table>
<tbody>
<tr>
<td>First row</td>
</tr>
<tr>
<td>Second row</td>
</tr>
<tr>
<td>Third row</td>
</tr>
<tr>
<td>Fourth row</td>
</tr>
<tr>
<td>Fifth row</td>
</tr>
</tbody>
</table>
</body>
</html>Exemplo de :nth-last-child() com a tag <li>:
Exemplo de código CSS :nth-last-child com tag ul
<!DOCTYPE html>
<html>
<head>
<style>
/* Selects the last three list items */
li:nth-last-child(-n+3),
li:nth-last-child(-n+3) ~ li {
color: #8EBF41;
}
</style>
</head>
<body>
<h2>:nth-last-child selector example</h2>
<ol>
<li>List Item One</li>
<li>List Item Two</li>
</ol>
<ol>
<li>List Item One</li>
<li>List Item Two</li>
<li>List Item Three</li>
<li>List Item Four</li>
<li>List Item Five</li>
<li>List Item Six</li>
</ol>
</body>
</html>Observe que li:nth-last-child(-n+3) é combinado com o seletor de irmão geral (~ li) para que os últimos três itens da lista sejam destacados de forma confiável em todos os navegadores. Na segunda lista (com seis itens), os três últimos — "Four", "Five" e "Six" — ficam verdes.
Seletores relacionados
:nth-child()— a mesma ideia, mas contando a partir do primeiro irmão.:nth-of-type()— conta apenas irmãos do mesmo tipo de elemento, a partir do início.:nth-last-of-type()— conta irmãos do mesmo tipo a partir do final.:last-child— um atalho equivalente a:nth-last-child(1).