CSS :nth-last-of-type() Pseudo Class
A pseudo-classe :nth-last-of-type() do CSS seleciona elementos a partir do último, de trás para frente. Saiba mais e veja exemplos.
A pseudo-classe CSS :nth-last-of-type() corresponde a elementos de um determinado tipo, contando a partir do último elemento desse tipo entre seus irmãos. É o espelho de :nth-of-type(), que conta a partir do primeiro.
Isso é útil quando o número de elementos é desconhecido ou muda dinamicamente e você precisa estilizar itens em relação ao final de uma lista — por exemplo, destacar as últimas linhas de uma tabela ou os itens finais de um menu de navegação, independentemente de quantos vêm antes.
Sintaxe
A pseudo-classe aceita um único argumento dentro dos parênteses: um número, uma palavra-chave ou uma fórmula.
:nth-last-of-type( <nth> ) {
/* style declarations */
}| Valor | Descrição |
|---|---|
number | Corresponde ao enésimo elemento exato de seu tipo, contando a partir do final (1 = o último). |
odd / even | Corresponde a elementos em posições ímpares ou pares contadas a partir do final. |
an + b | Corresponde a cada elemento de índice a começando no deslocamento b, contando a partir do final. a e b são inteiros e n percorre 0, 1, 2, …. |
Como funciona a fórmula an + b
O navegador substitui n = 0, 1, 2, … na fórmula e mantém cada posição que ela produz. A contagem sempre começa no último elemento do tipo correspondente:
2n(mesmo queeven) → posições 2, 4, 6, … a partir do final.2n + 1(mesmo queodd) → posições 1, 3, 5, … a partir do final.3n + 1→ posições 1, 4, 7, … a partir do final.-n + 3→ os últimos três elementos (posições 3, 2, 1 a partir do final).
Como difere de seletores relacionados
:nth-of-type()conta os mesmos elementos correspondentes, mas começa pelo início em vez de pelo final.:nth-last-child()também conta a partir do final, mas considera todos os elementos irmãos, não apenas os do mesmo tipo.:nth-last-of-type()ignora irmãos de outros tipos durante a contagem. Os dois têm especificidade idêntica.
Veja também :last-of-type, que é equivalente a :nth-last-of-type(1).
Exemplos
Selecionando uma posição exata a partir do final
Aqui :nth-last-of-type(3) seleciona o terceiro parágrafo contado a partir do final — ou seja, "Paragraph 4" em uma lista de seis.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
p:nth-last-of-type(3) {
background: #8ebf42;
}
</style>
</head>
<body>
<h2>:nth-last-of-type() selector example</h2>
<p>Paragraph 1</p>
<p>Paragraph 2</p>
<p>Paragraph 3</p>
<p>Paragraph 4</p>
<p>Paragraph 5</p>
<p>Paragraph 6</p>
</body>
</html>Usando as palavras-chave odd e even
Contando a partir do final, odd corresponde ao 1º, 3º, 5º, … parágrafos (ou seja, "Paragraph 6", "Paragraph 4", "Paragraph 2"), e even corresponde ao 2º, 4º, 6º, … ("Paragraph 5", "Paragraph 3", "Paragraph 1"). Juntos, estilizam todos os parágrafos em duas cores alternadas.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
p:nth-last-of-type(odd) {
background: #1c87c9;
color: #eeeeee;
}
p:nth-last-of-type(even) {
background: #666666;
color: #eeeeee;
}
</style>
</head>
<body>
<h2>:nth-last-of-type selector example</h2>
<p>Paragraph 1</p>
<p>Paragraph 2</p>
<p>Paragraph 3</p>
<p>Paragraph 4</p>
<p>Paragraph 5</p>
<p>Paragraph 6</p>
</body>
</html>Usando uma fórmula (an + b)
Com nove parágrafos, 3n + 1 corresponde a cada terceiro parágrafo contado a partir do final — posições 1, 4 e 7 a partir do final, ou seja, o 9º, 6º e 3º parágrafos na ordem do documento.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
p:nth-last-of-type(3n+1) {
background: #767fea;
padding: 10px;
color: #ffffff;
}
</style>
</head>
<body>
<p>The first paragraph.</p>
<p>The second paragraph.</p>
<p>The third paragraph.</p>
<p>The fourth paragraph.</p>
<p>The fifth paragraph.</p>
<p>The sixth paragraph.</p>
<p>The seventh paragraph.</p>
<p>The eighth paragraph.</p>
<p>The ninth paragraph.</p>
</body>
</html>Selecionando os últimos N elementos
Um coeficiente negativo é a forma idiomática de selecionar os últimos itens. -n + 3 corresponde aos últimos três parágrafos independentemente do total:
p:nth-last-of-type(-n + 3) {
font-weight: bold;
}Suporte a navegadores e especificação
:nth-last-of-type() é suportado em todos os navegadores modernos. Está definido em: