:first-of-type
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.
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
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
| Specification |
|---|
| Selectors Level 4 # first-of-type-pseudo |
