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

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

:first-of-type

Exemples

CSS

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

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

Spécification État Commentaires
Selectors Level 4
La définition de ':first-of-type' dans cette spécification.
Version de travail Les éléments ciblés ne doivent pas nécessairement avoir de parent.
Selectors Level 3
La définition de ':first-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 : cdoublev, SphinxKnight, tregagnon, enogael, teoli, FredB, ThePrisoner
Dernière mise à jour par : cdoublev,