La pseudo-classe :last-of-type
cible un élément qui est le dernier enfant d'un type donné dans la liste des enfants de l'élément parent.
/* Cible n'importe quel paragraphe qui est */
/* le dernier paragraphe de son élément parent */
p:last-of-type {
color: lime;
}
Note : Dans la version initiale de la spécification (CSS3), l'élément ciblé devait avoir un parent, ce n'est plus nécessaire depuis (spécification pour les sélecteurs de CSS4).
Syntaxe
:last-of-type
Exemples
Pour cibler le dernier élément <em>
au sein d'un élément <p>
, on pourra utiliser la règle qui suit (illustrée ensuite sur un fragment HTML).
CSS
p em:last-of-type {
color: lime;
}
HTML
<p>
<em>Je ne suis pas vert :(</em>
<strong>Je ne suis pas vert :(</strong>
<em>Je suis vert :D</em>
<strong>Je ne suis pas vert non plus :(</strong>
</p>
<p>
<em>Je ne suis pas vert :(</em>
<span>
<em>Je suis vert !</em>
</span>
<strong>Je ne suis pas vert :(</strong>
<em>Je suis vert :D</em>
<span>
<em>Je suis aussi vert !</em>
<strike>Je ne suis pas vert</strike>
</span>
<strong>Je ne suis pas vert non plus :(</strong>
</p>
Résultat
Spécifications
Spécification | État | Commentaires |
---|---|---|
Selectors Level 4 La définition de ':last-of-type' dans cette spécification. |
Version de travail | L'élément ciblé ne doit pas nécessairement avoir un élément parent. |
Selectors Level 3 La définition de ':last-of-type' dans cette spécification. |
Recommendation | Définition initiale. |
Compatibilité des navigateurs
BCD tables only load in the browser