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 non plus vert :(</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 non plus vert :(</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

FonctionnalitéChromeEdgeFirefoxInternet ExplorerOperaSafari
Support simple1 Oui3.599.53.2
FonctionnalitéAndroid webviewChrome for AndroidEdge mobileFirefox for AndroidOpera AndroidiOS SafariSamsung Internet
Support simple2.1 ? Oui4103.2 ?

Voir aussi

Étiquettes et contributeurs liés au document

Étiquettes : 
 Contributeurs à cette page : SphinxKnight, tregagnon, teoli, FredB, ThePrisoner
 Dernière mise à jour par : SphinxKnight,