Le :first-childsélecteur vous permet de cibler le premier élément immédiatement à l'intérieur d'un autre élément. 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 et que nous voulions agrandir le premier paragraphe - comme un «lede» ou un morceau de texte d'introduction:
First paragraph…
Lorem ipsum…
Dolor sit amet…
Consectetur adipisicing…
Au lieu de lui donner une classe (par exemple .first), nous pouvons utiliser :first-childpour le sélectionner:
p:first-child ( font-size: 1.5em; )L'utilisation :first-childest très similaire à :first-of-typemais avec une différence critique: elle est moins spécifique. :first-childessaiera seulement de faire correspondre le premier enfant immédiat d'un élément parent, tandis que first-of-typecorrespondra à la première occurrence d'un élément spécifié, même s'il ne vient pas absolument en premier dans le HTML. Dans l'exemple ci-dessus, le résultat serait le même, uniquement parce que le premier enfant de est articleégalement le premier pélément. Cela révèle la puissance de :first-child: il peut identifier un élément par rapport à tous ses frères et sœurs, pas seulement des frères et sœurs du même type.
L'exemple plus complet ci - dessous montre l'utilisation de :first-childet un sélecteur pseudo-classe associée, :last-child.
Prise en charge du navigateur
| Chrome | Safari | Firefox | Opéra | C'EST À DIRE | Android | iOS |
|---|---|---|---|---|---|---|
| Tout | 3.2+ | Tout | 9.5+ | 9+ | Tout | Tout |
:first-childa é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é.