Le sélecteur :first-of-type en CSS vous permet de cibler la première occurrence d'un élément dans son conteneur. Il est défini dans la spécification CSS Selectors Level 3 comme une "pseudo-classe structurelle", ce qui signifie qu'il est utilisé pour styliser le contenu en fonction de sa relation avec le contenu parent et frère.

Supposons que nous ayons un article avec un titre et plusieurs paragraphes :

<article>
  <h1>A Title</h1>
  <p>Paragraph 1.</p>
  <p>Paragraph 2.</p>
  <p>Paragraph 3.</p>
</article>

Nous voulons agrandir le premier paragraphe, comme une sorte de paragraphe d'introduction. Au lieu de lui donner une classe, nous pouvons utiliser :first-of-type pour le sélectionner :

p:first-of-type {
  font-size: 1.25em;
}

L'utilisation de :first-of-type est très similaire à :nth-child mais avec une différence essentielle : elle est moins spécifique. Dans l'exemple ci-dessus, si nous avions utilisé p:nth-child(1), rien ne se serait produit car le paragraphe n'est pas le premier enfant de son parent (l'<article>). Cela révèle la puissance de :first-of-type : il cible un type d'élément particulier dans une disposition particulière par rapport aux frères et sœurs similaires, et non pas tous les frères et sœurs.

L'exemple plus complet ci-dessous démontre l'utilisation de :first-of-type et d'un sélecteur de pseudo-classe connexe, :last-of-type.

voir CSS-Tricks: :first-of-type and :last-of-type de zakkain dans CodePen