Sélecteur :FIRST-OF-TYPE
Rôle
Le sélecteur first-of-type est une pseudo-classe désigné par la syntaxe :first-of-type qui permet de cibler le premier enfant d’un type particulier parmi tous les autres enfants de l’élément parent
Note : si aucun sélecteur simple n’est précisé, il se comporte comme le sélecteur universel.
Dans l’exemple ci-dessous, le premier sous-titre trouvé dans le body est rouge
h2:first-of-type{
color: red;
}
<h1>titre</h1>
<h2>sous-titre 1</h2>
<h2>sous-titre 2</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Possimus deleniti facere cum optio</p>
Version : CSS3
Testez vous-même ce sélecteur
L’utilisation de l’attribut :first-child à la place :first-of-type ne permet pas d’obtenir le même résultat, puisque le premier enfant de body n’est pas le titre h2 mais le titre h1
h2:first-child{
color: red;
}
Résultat
Compatibilité
Le sélecteur first-of-type est pris en charge par tous les principaux navigateurs
A partir d’Internet Explorer 9
A voir aussi
:first-child
:last-child
:last-of-type
:nth-child(n)
:nth-of-type(n)
:nth-last-child(n)
:nth-last-of-type(n)
only-child
:only-of-type
