CSS :nth-last-of-type() Pseudo Classe
La pseudo-classe CSS :nth-last-of-type() seleziona elementi a partire dall'ultimo, contando a ritroso. Scopri come usarla con esempi pratici.
La pseudo-classe CSS :nth-last-of-type() corrisponde agli elementi di un determinato tipo, contando dall'ultimo elemento di quel tipo tra i suoi fratelli. È il riflesso speculare di :nth-of-type(), che invece conta dal primo.
Questo è utile quando il numero di elementi è sconosciuto o cambia dinamicamente e hai bisogno di applicare stili agli elementi relativamente alla fine di un elenco — per esempio, evidenziare le ultime righe di una tabella o gli elementi finali di un menu di navigazione, indipendentemente da quanti ce ne siano prima.
Sintassi
La pseudo-classe accetta un singolo argomento tra le parentesi: un numero, una parola chiave o una formula.
:nth-last-of-type( <nth> ) {
/* style declarations */
}| Valore | Descrizione |
|---|---|
number | Corrisponde all'esatto n-esimo elemento del suo tipo, contando dalla fine (1 = l'ultimo). |
odd / even | Corrisponde agli elementi in posizioni dispari o pari contate dalla fine. |
an + b | Corrisponde a ogni a-esimo elemento a partire dall'offset b, contando dalla fine. a e b sono interi e n scorre 0, 1, 2, …. |
Come funziona la formula an + b
Il browser sostituisce n = 0, 1, 2, … nella formula e mantiene ogni posizione che essa produce. Il conteggio parte sempre dall'ultimo elemento del tipo corrispondente:
2n(uguale aeven) → posizioni 2, 4, 6, … dalla fine.2n + 1(uguale aodd) → posizioni 1, 3, 5, … dalla fine.3n + 1→ posizioni 1, 4, 7, … dalla fine.-n + 3→ gli ultimi tre elementi (posizioni 3, 2, 1 dalla fine).
Come si distingue dai selettori correlati
:nth-of-type()conta gli stessi elementi corrispondenti ma parte dall'inizio anziché dalla fine.:nth-last-child()conta anch'esso dalla fine, ma considera tutti gli elementi fratelli, non solo quelli dello stesso tipo.:nth-last-of-type()ignora i fratelli di altri tipi nel conteggio. I due hanno una specificità identica.
Vedi anche :last-of-type, che equivale a :nth-last-of-type(1).
Esempi
Selezionare una posizione esatta dalla fine
Qui :nth-last-of-type(3) seleziona il terzo paragrafo contato dalla fine — ovvero "Paragraph 4" in un elenco di sei.
<!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>Usare le parole chiave odd e even
Contando dalla fine, odd corrisponde al 1°, 3°, 5°, … paragrafo (quindi "Paragraph 6", "Paragraph 4", "Paragraph 2"), e even corrisponde al 2°, 4°, 6°, … ("Paragraph 5", "Paragraph 3", "Paragraph 1"). Insieme, applicano stili a ogni paragrafo in due colori alternati.
<!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>Usare una formula (an + b)
Con nove paragrafi, 3n + 1 corrisponde a ogni terzo paragrafo contando dalla fine — posizioni 1, 4 e 7 dalla fine, ovvero il 9°, il 6° e il 3° paragrafo nell'ordine del 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>Selezionare gli ultimi N elementi
Un coefficiente negativo è il modo idiomatico per selezionare gli ultimi elementi. -n + 3 corrisponde agli ultimi tre paragrafi indipendentemente dal numero totale:
p:nth-last-of-type(-n + 3) {
font-weight: bold;
}Supporto browser e specifica
:nth-last-of-type() è supportata da tutti i browser moderni. È definita in: