: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
Error: could not find syntax for this item
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 |
Compatibilité des navigateurs
BCD tables only load in the browser