:first-child
Correspond à l’élément qui est le premier enfant de son parent.
Exemple
#.list li {
padding: 8px 0;
border-top: 1px solid #3f3f46;
}
.list li:first-child {
border-top: 0;
}<ul class="list stage" style="margin: 0; padding: 4px 14px; list-style: none;">
<li>Leçon 1 : sélecteurs</li>
<li>Leçon 2 : pseudo-classes</li>
<li>Leçon 3 : pseudo-éléments</li>
</ul>Définition et utilisation
#La pseudo-classe :first-child sélectionne l’élément placé tout au début de son parent. li:first-child correspond au premier point de chaque liste de la page, car chaque liste a un premier point. Seuls les éléments comptent, le texte qui les précède n’a pas d’importance.
Le piège le plus fréquent : le sélecteur vérifie si l’élément est le premier enfant tout court, pas le premier élément d’un type donné. Si un titre précède le premier paragraphe dans un article, p:first-child ne touchera rien, car le premier enfant est le titre. C’est à cela que sert :first-of-type, qui ne compte que les éléments portant la même balise.
La pseudo-classe est utile pour retirer les espaces et les bordures superflus sur les bords : le premier élément d’une liste sans trait du haut, la première carte sans marge. :first-child signifie la même chose que :nth-child(1), et son miroir est :last-child.
Syntaxe
#sélecteur:first-child { propriété: valeur; }Exemples de sélecteurs
#- Le premier point de la liste, car il se trouve tout au début de son parent.
- Rien ne se met en surbrillance : le premier enfant de l’article est
h4, pas un paragraphe. - La solution : le premier paragraphe parmi les paragraphes, sans tenir compte du titre qui le précède.
- Tous les points sauf le premier. Pratique pour des traits séparant les éléments suivants.
Exemples de sélecteurs en pratique
#li:first-child
li:first-child { background: #7c3aed; color: #fff; }p:first-child
h4, pas un paragraphe.p:first-child { background: #7c3aed; color: #fff; }p:first-of-type
p:first-of-type { background: #7c3aed; color: #fff; }li:not(:first-child)
li:not(:first-child) { background: #7c3aed; color: #fff; }Compatibilité des navigateurs
#Largement disponible
Fonctionne dans tous les navigateurs modernes, y compris sur mobile. Vous pouvez l’utiliser sans crainte.
- Chrome
- Edge
- Firefox
- Safari
Bonnes pratiques
#- Avant d’utiliser
p:first-child, vérifiez ce qui se trouve vraiment au début du parent.:first-of-typeest souvent plus sûr. - Pour un élément qui est l’unique enfant, il existe
:only-child. Elle correspond quand l’élément est à la fois premier et dernier. - Plutôt que de remettre à zéro la bordure du premier élément, vous pouvez directement écrire
li + li { border-top: … }ouli:not(:first-child).
Entrées associées
#- :last-childCorrespond à l’élément qui est le dernier enfant de son parent.
- :nth-child()Sélectionne des éléments selon leur position parmi leurs frères : un sur deux, un sur trois, les trois premiers ou tous à partir du septième.
- :nth-of-type()Sélectionne des éléments selon leur position parmi les frères portant la même balise, par exemple une image sur deux ou le troisième paragraphe.
- :not()Sélectionne les éléments qui ne correspondent à aucun des sélecteurs fournis, ni à aucun de la liste.
- A + BLe signe + sélectionne l’élément B qui se trouve immédiatement après l’élément A et partage le même parent que lui.
Vous voyez une erreur ou il manque un exemple ? Écrivez-nous.