Pseudo-classe first-of-type

La pseudo-classe first-of-type sélectionne un élément qui est le premier enfant du type donné de son parent. Autrement dit, si vous écrivez h2:first-of-type - le premier h2 dans le parent sera trouvé (contrairement à first-child, qui ne trouvera que le h2 qui se trouve tout premier dans le parent).

Syntaxe

csssélecteur:first-of-type {
  
}

Exemple

Trouvons le paragraphe qui est le premier paragraphe dans le parent :

html<div>
  <h2>titre</h2>
  <p>paragraphe</p>
  
  <h2>titre</h2>
  <p>paragraphe</p>
  
  <h2>titre</h2>
  <p>paragraphe</p>
</div>

cssp:first-of-type {
  color: red;
}

Результат: