: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.

css
/* 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

Error: could not find syntax for this item

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

css
p em:last-of-type {
  color: lime;
}

HTML

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

Specification
Selectors Level 4
# last-of-type-pseudo

Compatibilité des navigateurs

BCD tables only load in the browser

Voir aussi