CSS :nth-last-child Pseudo Classe
La pseudo-classe CSS :nth-last-child() seleziona elementi partendo dall'ultimo verso l'inizio. Scopri come usarla con esempi pratici.
La pseudo-classe :nth-last-child() seleziona gli elementi in base alla loro posizione all'interno di un gruppo di elementi fratelli, contando dall'ultimo elemento verso l'inizio. È l'immagine speculare di :nth-child(): invece di contare dall'inizio, conta dalla fine.
Questo la rende lo strumento giusto quando si vuole agire in base alla distanza di un elemento dalla fine di un elenco — ad esempio, per stilizzare l'ultimo elemento, gli ultimi elementi, o "tutti gli elementi tranne l'ultimo". Poiché il conteggio parte dal basso, la regola continua a funzionare anche quando si aggiungono o rimuovono elementi all'inizio dell'elenco.
L'argomento tra parentesi può essere un numero singolo, una parola chiave (odd / even) o una formula An+B.
Differenza da :nth-child()
Entrambe le pseudo-classi contano tra i fratelli, ma in direzioni opposte:
:nth-child(1)seleziona il primo fratello.:nth-last-child(1)seleziona l'ultimo fratello (equivalente a:last-child).
Quindi li:nth-last-child(2) punta sempre al penultimo elemento di un elenco, indipendentemente da quanti elementi lo precedano. Usa :nth-last-child() quando lo stile è ancorato alla fine del gruppo anziché all'inizio.
Nota:
:nth-last-child()conta tutti gli elementi fratelli indipendentemente dal tipo. Se hai bisogno di contare solo i fratelli dello stesso tipo di elemento (partendo dalla fine), usa invece:nth-last-of-type().
Valori con parola chiave
odd
Seleziona gli elementi con indice dispari (ad es. 1, 3, 5, 7, ecc.).
even
Seleziona gli elementi con indice pari (ad es. 2, 4, 6, 8, ecc.).
Notazione funzionale
<An+B>
Seleziona gli elementi la cui posizione numerica (contata dall'ultimo fratello) corrisponde al pattern An+B, valutato per ogni valore intero non negativo di n (0, 1, 2, …). L'indice dell'ultimo elemento è 1. A e B devono essere interi e possono essere negativi: A definisce il passo (lunghezza del pattern) e B definisce lo scostamento.
Alcune formule comuni, tenendo presente la direzione del conteggio:
| Formula | Corrisponde a (contando dalla fine) |
|---|---|
2n | Ogni 2° elemento (even) |
2n+1 | Un elemento su due a partire dall'ultimo (odd) |
3 | Solo il 3° elemento dalla fine |
n+3 | Il 3° elemento dalla fine e tutti quelli precedenti |
-n+3 | Solo gli ultimi 3 elementi |
Versione
Sintassi
Sintassi CSS :nth-last-child
selector:nth-last-child() {
css declarations;
}Esempio del selettore :nth-last-child():
Esempio 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>Qui p:nth-last-child(1) seleziona il paragrafo che è l'ultimo figlio del suo genitore, quindi solo il secondo paragrafo riceve lo sfondo blu.
Esempio con le parole chiave "odd" ed "even":
Esempio di codice 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 dalla fine, Paragraph 3 si trova alla posizione 1 (dispari), Paragraph 2 alla posizione 2 (pari) e Paragraph 1 alla posizione 3 (dispari). Quindi Paragraph 1 e Paragraph 3 usano la regola odd e Paragraph 2 usa la regola even.
Esempio di :nth-last-child() con il tag <table>:
Nota: affinché tr venga selezionato, deve essere un figlio diretto di tbody o table.
Esempio di codice CSS :nth-last-child con 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>Esempio di :nth-last-child() con il tag <li>:
Esempio di codice CSS :nth-last-child con 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>Si noti che li:nth-last-child(-n+3) è combinato con il selettore di fratelli generali (~ li) affinché gli ultimi tre elementi dell'elenco vengano evidenziati in modo affidabile in tutti i browser. Nel secondo elenco (sei elementi), gli ultimi tre — "Four", "Five" e "Six" — diventano verdi.
Selettori correlati
:nth-child()— la stessa idea, ma contando dal primo fratello.:nth-of-type()— conta solo i fratelli dello stesso tipo di elemento, dall'inizio.:nth-last-of-type()— conta i fratelli dello stesso tipo dalla fine.:last-child— equivalente abbreviato di:nth-last-child(1).