CSS :last-of-type Pseudo Class
La pseudo-classe CSS :last-of-type seleziona l'ultimo elemento del suo tipo tra i fratelli. Scopri come funziona e prova gli esempi.
La pseudo-classe CSS :last-of-type seleziona un elemento che è l'ultimo elemento del suo tipo tra i figli del suo genitore. Per "tipo" si intende il nome del tag dell'elemento — quindi p:last-of-type corrisponde all'ultimo <p> all'interno del suo genitore, indipendentemente dal numero di altri elementi (div, intestazioni, span) che lo seguono.
Questa pagina spiega cosa corrisponde :last-of-type, la sua sintassi, il suo comportamento su diversi tipi di elementi e — aspetto importante — come si differenzia dalla pseudo-classe dall'aspetto simile :last-child.
La pseudo-classe :last-of-type è equivalente a :nth-last-of-type(1) e seleziona esattamente lo stesso elemento.
Quando usarla
Utilizza :last-of-type quando vuoi applicare uno stile all'ultimo elemento di un determinato tag senza dipendere dalla sua posizione esatta. Usi comuni:
- Rimuovere il margine inferiore o il bordo dall'ultimo paragrafo in una card.
- Applicare stili all'ultimo elemento di lista, immagine o sezione in un contenitore che mescola tipi di elementi.
- Targettizzare "l'ultimo del suo tipo" quando non si può essere certi che sia anche l'ultimo figlio del genitore.
Se invece hai bisogno dell'elemento che è letteralmente l'ultimo figlio del genitore — indipendentemente dal suo tipo — usa :last-child. Vedi il confronto qui sotto.
Versione
Sintassi
Sintassi CSS :last-of-type
:last-of-type {
css declarations;
}Esempio del selettore :last-of-type:
Esempio di codice :last-of-type
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
p:last-of-type {
background: #8ebf42;
font-style: italic;
color: #eeeeee;
}
</style>
</head>
<body>
<h2>:last-of-type selector example</h2>
<p>Paragraph 1</p>
<p>Paragraph 2</p>
<p>Paragraph 3</p>
</body>
</html>Targettizzare gli elementi genitore
Il selettore può essere applicato anche agli elementi genitore.
Il selettore * è implicito quando non viene specificato alcun selettore di tipo (ad esempio, *:last-of-type è equivalente a :last-of-type).
Nell'esempio seguente, article:last-of-type applica uno stile all'ultimo <article> tra i suoi fratelli. Nota come la pseudo-classe venga valutata per tipo all'interno di ciascun genitore: gli elementi <em> sono raggruppati separatamente dagli elementi <div> e <b>, quindi ogni tag ha il proprio "ultimo del tipo".
Esempio di targettizzazione di un elemento genitore:
CSS :last-of-type Pseudo Class
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
article:last-of-type {
background-color: #8ebf42;
}
</style>
</head>
<body>
<article>
<div>This "div" is first.</div>
<div>This <span>nested "span" is last</span>!</div>
<div>This <em>nested "em" is first</em>, but this <em>nested "em" is last</em>!</div>
<b>This "b" qualifies!</b>
<div>This is the final "div"!</div>
</article>
</body>
</html>:last-of-type vs :last-child
I selettori :last-child e :last-of-type sembrano simili ma rispondono a domande diverse:
:last-childcorrisponde a un elemento solo se è l'ultimo figlio in assoluto del suo genitore — conta la posizione, non il tipo.:last-of-typecorrisponde all'ultimo elemento di un determinato tipo, anche se dopo di esso compaiono altri elementi.
Quindi p:last-of-type corrisponde all'ultimo <p> anche quando lo segue un <span>, mentre p:last-child non corrisponderebbe affatto a quel <p> (perché lo <span> è l'effettivo ultimo figlio). Nell'esempio seguente, la regola si applica all'ultimo paragrafo indipendentemente dagli span, mentre span:last-child punta solo all'ultimo span — che è anche l'ultimo figlio del body.
Esempio dei selettori CSS :last-of-type e :last-child:
Selettori :last-of-type e :last-child
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
p:last-of-type {
background: #8ebf42;
font-style: italic;
color: #eee;
}
span {
display: block;
}
span:last-child {
background: #8ebf42;
font-style: italic;
font-weight: bold;
color: #eee;
padding: 10px;
}
</style>
</head>
<body>
<h2>:last-of-type and :last-child selectors example</h2>
<p>Paragraph 1</p>
<p>Paragraph 2</p>
<p>Paragraph 3</p>
<span>Some text</span>
<span>Some text</span>
<span>Some text</span>
</body>
</html>Attenzione
:last-of-typeè delimitato per genitore: ogni elemento genitore ha il proprio "ultimo paragrafo", "ultimo div" e così via.- Funziona solo sui tipi di elementi. Non esiste un equivalente basato sulle classi —
.box:last-of-typesignifica "l'ultimo elemento il cui tipo corrisponde all'elemento che ha anche la classebox", non "l'ultimo elemento con classebox". Usa:last-childcombinato con una classe, oppure:nth-last-of-type(), per un controllo più preciso. - Se un genitore ha un solo elemento di un determinato tipo, quell'unico elemento è il suo
:last-of-type(e:first-of-type).
Selettori correlati
:first-of-type— il primo elemento del suo tipo.:nth-of-type()e:nth-last-of-type()— corrispondenza di tipo basata sulla posizione.:only-of-type— un elemento che è l'unico del suo tipo.:last-child— l'ultimo figlio indipendentemente dal tipo.