Le :first-of-typesélecteur en CSS vous permet de cibler la première occurrence d'un élément dans son conteneur. Elle est définie dans la spécification CSS Selectors Level 3 comme une «pseudo-classe structurelle», ce qui signifie qu'elle est utilisée 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:
Paragraph 1.
Paragraph 2.
Paragraph 3.
Nous voulons agrandir le premier paragraphe, comme une sorte de «lede» ou de paragraphe d'introduction. Au lieu de lui donner une classe, nous pouvons utiliser :first-of-typepour le sélectionner:
p:first-of-type ( font-size: 1.25em; )L'utilisation :first-of-typeest très similaire à :nth-childmais avec une différence critique: elle est moins spécifique. Dans l'exemple ci-dessus, si nous l'avions utilisé p:nth-child(1), rien ne se passerait car le paragraphe n'est pas le premier enfant de son parent (le ). Cela révèle le pouvoir de :first-of-type: il cible un type d'élément particulier dans un arrangement particulier par rapport à des frères et sœurs similaires, pas tous les frères et sœurs.
L'exemple plus complet ci - dessous montre l'utilisation de :first-of-typeet un sélecteur pseudo-classe associée, :last-of-type.
Prise en charge du navigateur
| Chrome | Safari | Firefox | Opéra | C'EST À DIRE | Android | iOS |
|---|---|---|---|---|---|---|
| Travaux | 3.2+ | Travaux | 9.5+ | 9+ | Travaux | Travaux |
:first-of-typea été introduit dans CSS Selectors Module 3, ce qui signifie que les anciennes versions des navigateurs ne le prennent pas en charge. Cependant, la prise en charge des navigateurs modernes est irréprochable et les nouveaux pseudo-sélecteurs sont largement utilisés dans les environnements de production. Si vous avez besoin d'un support de navigateur plus ancien, polyfill pour IE ou utilisez ces sélecteurs de manière non critique à une amélioration progressive, ce qui est recommandé.