:last-of-type

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

Voir aussi