La pseudo-classe :first-child
permet de cibler un élément qui est le premier élément fils par rapport à son élément parent.
/* Cible n'importe quel élément <p> qui est */
/* le premier fils de son élément parent */
p:first-child {
color: lime;
background-color: black;
}
Note : Tel que défini initialement, il était nécessaire que l'élément sélectionné ait un élément parent. À partir de la spécification de niveau 4 pour les sélecteurs, cela n'est plus obligatoire.
Syntaxe
:first-child
Exemples
Premier exemple
CSS
p:first-child {
color: lime;
background-color: black;
padding: 5px;
}
HTML
<div>
<p>Ce paragraphe est mis en forme car c'est un élément
p ET que c'est le premier fils de l'élément div.</p>
<p>En revanche, ce paragraphe n'est pas mis en forme
car ce n'est pas le premier !</p>
</div>
<div>
<h2>Ce titre h2 n'est pas mis en forme car ce n'est pas
un paragraphe.</h2>
<p>Et ce paragraphe n'est pas mis en forme car ce n'est pas
le premier fils !</p>
</div>
Résultat
Utiliser les listes non ordonnées
CSS
li{
color:blue;
}
li:first-child{
color:green;
}
HTML
<ul>
<li>Élément 1 de la liste</li>
<li>Élément 2</li>
<li>Élément 3</li>
</ul>
Résultat
Spécifications
Spécification | État | Commentaires |
---|---|---|
Selectors Level 4 La définition de ':first-child' dans cette spécification. |
Version de travail | Les éléments correspondants ne doivent pas avoir nécessairement de parent. |
Selectors Level 3 La définition de ':first-child' dans cette spécification. |
Recommendation | Aucune modification. |
CSS Level 2 (Revision 1) La définition de ':first-child' dans cette spécification. |
Recommendation | Définition initiale. |
Compatibilité des navigateurs
BCD tables only load in the browser
Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une pull request sur https://github.com/mdn/browser-compat-data.