CSS :last-child Pseudo Classe
Scopri come funziona la pseudo-classe CSS :last-child, le differenze con :last-of-type e vedi esempi pratici per liste, tabelle e moduli.
La pseudo-classe CSS :last-child seleziona un elemento che è l'ultimo figlio del suo genitore — ovvero il fratello finale nell'elenco dei figli del genitore. Viene usata più spesso per rimuovere un bordo finale tra gli elementi di una lista, azzerare il margine inferiore dell'ultimo paragrafo, o evidenziare l'ultima riga di una tabella.
Questa pagina spiega come viene valutato :last-child, la regola fondamentale che coglie di sorpresa la maggior parte degli sviluppatori, come si confronta con :last-of-type, e diversi esempi eseguibili.
Come funziona :last-child
Il selettore p:last-child non significa "l'ultimo <p> nel genitore". Significa "un <p> che è anche l'ultimo figlio assoluto del suo genitore". La posizione viene verificata per prima; il nome del tag viene verificato per secondo.
/* Matches the <p> ONLY when it is the final child of its parent */
p:last-child {
font-weight: bold;
}Considera questo markup:
<div>
<p>Paragraph — NOT selected.</p>
<span>I am the last child, so the rule above never fires.</span>
</div>Poiché <span> è l'ultimo figlio, p:last-child non corrisponde a nulla qui. Per selezionare l'ultimo <p> indipendentemente da ciò che segue, usa invece :last-of-type.
:last-child è il contraltare di :first-child. Per contare dalla fine (ad esempio, il penultimo), usa :nth-last-child().
In Selectors Level 3, l'elemento corrispondente doveva avere un genitore. Selectors Level 4 allenta questo requisito: :last-child può ora corrispondere a un elemento radice che non ha un genitore.
Sintassi
selector:last-child {
/* declarations */
}:last-child può essere combinato con qualsiasi selettore di elemento, classe o ID:
li:last-child { border-bottom: none; } /* last <li> in its parent */
.card:last-child { margin-bottom: 0; } /* last element with class .card */
tr:last-child td { font-weight: bold; } /* cells in the last table row */Esempio base: paragrafi
I due paragrafi seguenti sono entrambi figli di <body>. p:last-child corrisponde solo al secondo perché è l'ultimo figlio del suo genitore.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
p:last-child {
background-color: #1c87c9;
color: #ffffff;
}
</style>
</head>
<body>
<h2>Last-child selector example</h2>
<p>Lorem ipsum is simply dummy text...</p>
<p>Lorem Ipsum is simply dummy text...</p>
</body>
</html>Esempio con liste: stilizzare l'ultimo <li>
li:last-child si applica all'ultimo <li> all'interno di ciascun <ul> o <ol> in modo indipendente — le liste nidificate hanno ognuna il proprio ultimo figlio.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
li:last-child {
background: #1c87c9;
color: #ffffff;
}
</style>
</head>
<body>
<h2>:last-child selector example</h2>
<ul>
<li>Paris</li>
<li>Moscow</li>
<li>Rome</li>
</ul>
<ol>
<li>Paris</li>
<li>Moscow</li>
<li>Rome</li>
</ol>
</body>
</html>Più paragrafi all'interno di un contenitore
Quando quattro elementi <p> sono fratelli all'interno dello stesso genitore, solo il quarto corrisponde a p:last-child.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
p:last-child {
background: #8ebf42;
color: #ffffff;
}
</style>
</head>
<body>
<h2>:last-child selector example</h2>
<p>Paragraph 1</p>
<p>Paragraph 2</p>
<p>Paragraph 3</p>
<p>Paragraph 4</p>
</body>
</html>Liste nidificate
:last-child si applica in modo indipendente a ogni livello di nidificazione. Nell'esempio seguente, "List Item 3" è l'ultimo figlio dell'<ul> esterno, e "List Item 3.3" è l'ultimo figlio dell'<ul> interno.
<!DOCTYPE html>
<html>
<head>
<style>
ul li {
color: #8ebf42;
}
ul li:last-child {
border: 1px dotted #8ebf42;
color: #1c87c9;
}
</style>
</head>
<body>
<h2>:last-child selector example</h2>
<ul>
<li>List Item 1</li>
<li>List Item 2</li>
<li>
List Item 3
<ul>
<li>List Item 3.1</li>
<li>List Item 3.2</li>
<li>List Item 3.3</li>
</ul>
</li>
</ul>
</body>
</html>Casi d'uso comuni
Rimuovere un separatore finale
Un pattern classico: aggiungere un bordo divisorio a ogni elemento, poi rimuoverlo dall'ultimo in modo che il gruppo non termini con una linea pendente.
.menu li {
border-bottom: 1px solid #ccc;
padding: 8px 0;
}
/* Remove the bottom border from the final item */
.menu li:last-child {
border-bottom: none;
}Questo approccio è più manutenibile rispetto all'aggiunta manuale di una classe all'ultimo <li>, perché il selettore si adatta automaticamente quando vengono aggiunti o rimossi elementi.
Rimuovere il margine dall'ultimo paragrafo
I blocchi di contenuto spesso richiedono spaziatura tra i paragrafi ma non dopo l'ultimo — altrimenti il margine del paragrafo si somma al padding del contenitore.
.content p {
margin-bottom: 1rem;
}
.content p:last-child {
margin-bottom: 0;
}Stilizzare l'ultima riga di una tabella
table tr:last-child td {
font-weight: bold;
border-bottom: 2px solid #333;
}Questo evidenzia la riga dei totali in una tabella riepilogativa senza aggiungere una classe all'HTML.
:last-child vs :last-of-type
Questi due selettori vengono spesso confusi. La differenza fondamentale:
| Selettore | Cosa verifica |
|---|---|
p:last-child | Questo <p> è l'ultimo figlio del suo genitore (per posizione)? |
p:last-of-type | Questo <p> è l'ultimo <p> tra i suoi fratelli (per tipo, ignorando altri elementi)? |
<div>
<p>Paragraph 1</p>
<p>Paragraph 2</p> <!-- p:last-of-type matches here -->
<span>A span</span> <!-- this is the last child -->
</div>p:last-child→ non corrisponde a nulla (l'ultimo figlio è uno<span>, non un<p>).p:last-of-type→ corrisponde a "Paragraph 2" (l'ultimo<p>tra i fratelli).
Usa :last-child quando la posizione è importante. Usa :last-of-type quando conta solo il tipo di elemento.
Specificità
:last-child è una pseudo-classe, quindi contribuisce con 0-1-0 alla specificità — lo stesso di un selettore di classe. I selettori combinati si sommano normalmente:
li:last-child /* specificity: 0-1-1 (type + pseudo-class) */
.list li:last-child /* specificity: 0-2-1 (class + type + pseudo-class) */Supporto dei browser
:last-child è supportato in tutti i browser moderni (Chrome, Firefox, Safari, Edge) e lo è stato fin da IE 9. Non sono necessari prefissi vendor o fallback.
Specifica
Selettori correlati
:first-child— seleziona il primo figlio del suo genitore.:last-of-type— seleziona l'ultimo elemento di un dato tipo, ignorando altri tipi di elementi tra i fratelli.:only-child— seleziona un elemento che è l'unico figlio del suo genitore.:nth-last-child()— seleziona elementi contando dalla fine usando una formula.:nth-child()— seleziona elementi contando dall'inizio usando una formula.