:first-of-type

La pseudo-classe :first-of-type permet de cibler le premier élément d'un type donné parmi ceux d'un même élément parent (et de même niveau).

css
/* Cible le premier élément <p> d'un type donné */
/* parmi ses éléments voisins */
p:first-of-type {
  color: red;
}

Note : Dans la version initiale de la spécification (CSS3), l'élément ciblé devait avoir un parent, ce prérequis a désormais été abandonné (cf. spécification des sélecteurs pour CSS4).

Syntaxe

Error: could not find syntax for this item

Exemples

CSS

css
div :first-of-type {
  background-color: lime;
}

HTML

html
<div>
  <span>Voici le premier span !</span>
  <span>Un autre span, pas le premier.</span>
  <span>Quid de cet <em>élément imbriqué </em>?</span>
  <b>Un autre type d'élément.</b>
  <span>Ce type là est déjà apparu.</span>
</div>

Résultat

Note : On peut voir ici que c'est le sélecteur universel qui est pris en compte quand aucun sélecteur simple n'est écrit directement avec la pseudo-classe.

Note : Les modifications de styles s'appliquent également aux éléments imbriqués, vous pouvez essayer de modifier l'exemple précédent pour cibler le <div>.

Spécifications

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

Compatibilité des navigateurs

BCD tables only load in the browser

Voir aussi