CSS :first-child Pseudo Classe
La pseudo-classe :first-child cible le premier enfant de son parent. Syntaxe, pièges et exemples interactifs.
La pseudo-classe CSS :first-child correspond à un élément qui est le premier enfant de son parent. Elle est le plus souvent utilisée pour styliser le premier élément d'une liste, le premier paragraphe d'une section, ou pour supprimer la marge/bordure supérieure du premier élément d'un groupe.
Cette page couvre la syntaxe, la règle qui piège la plupart des gens, plusieurs exemples interactifs, et en quoi :first-child diffère de ses proches cousins.
Le piège : "premier enfant" ne signifie pas "premier de ce type"
Un sélecteur comme p:first-child ne signifie pas "le premier <p> à l'intérieur du parent." Il signifie "un <p> qui est également le tout premier enfant de son parent." Si un autre élément précède le paragraphe, la règle ne correspond à rien.
<div>
<h2>Heading</h2>
<p>This paragraph is NOT styled — the <h2> is the first child.</p>
</div>
<div>
<p>This paragraph IS styled — it is the first child of its <div>.</p>
</div>Ainsi, p:first-child se lit de droite à gauche : sélectionner <p>, mais uniquement quand ce <p> est le premier enfant de son parent. Quand vous voulez "le premier paragraphe peu importe ce qui le précède", utilisez plutôt :first-of-type.
:first-child et les sélecteurs apparentés
| Sélecteur | Correspond à |
|---|---|
:first-child | Un élément qui est le premier enfant de son parent |
:last-child | Un élément qui est le dernier enfant de son parent |
:first-of-type | Le premier élément de son type parmi ses frères et sœurs |
:only-child | Un élément qui est le seul enfant de son parent |
:nth-child(n) | Le nième enfant, selon n'importe quelle formule (2n, 3n+1, etc.) |
:first-child est équivalent à :nth-child(1). La différence clé avec :first-of-type réside dans la condition : :first-child ne correspond que si l'élément est le premier enfant de son parent, tandis que :first-of-type correspond au premier élément de son type spécifique parmi ses frères et sœurs — peu importe ce qui le précède.
Version
Syntaxe
Exemple de syntaxe CSS :first-child
:first-child {
css declarations;
}Exemples
Avec la balise <p>
Ici, le premier <p> est le premier enfant de <body>, il est donc stylisé. Le second <p> suit un <h2>, il ne l'est donc pas.
Exemple de code CSS :first-child
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
p:first-child {
background-color: #1c87c9;
color: #fff;
}
</style>
</head>
<body>
<p>Lorem ipsum is simply dummy text...</p>
<h2>First-child selector example</h2>
<p>Lorem Ipsum is simply dummy text...</p>
</body>
</html>Avec la balise <li>
li:first-child met en évidence le premier élément de chaque liste. Comme <ul> et <ol> réinitialisent tous deux le compteur d'enfants, le premier <li> de chacun reçoit l'arrière-plan.
Autre exemple de code CSS :first-child
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
li:first-child {
background: #8ebf42;
}
</style>
</head>
<body>
<h2>:first-child selector example</h2>
<ul>
<li>Paris</li>
<li>Moscow</li>
<li>Rome</li>
</ul>
<ol>
<li>Paris</li>
<li>Moscow</li>
<li>Rome</li>
</ol>
</body>
</html>Avec la balise <ol>
Deux éléments <ol> sont placés côte à côte dans <body>. Seul le premier est le premier enfant de <body>, donc seul lui reçoit l'arrière-plan.
Exemple du sélecteur :first-child avec la balise HTML ol
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
ol:first-child {
background: #8ebf42;
}
</style>
</head>
<body>
<ol>
<li>London</li>
<li>Paris</li>
<li>Rome</li>
</ol>
<ol>
<li>London</li>
<li>Paris</li>
<li>Rome</li>
</ol>
</body>
</html>Avec la balise <em>
p em:first-child cible un <em> uniquement quand il est le premier enfant d'un <p>. Dans chaque paragraphe ci-dessous, le premier <em> suit les mots "Here is a", donc il n'est pas le premier enfant — la règle ne correspond à rien. C'est une illustration délibérée du piège évoqué plus haut.
Exemple du sélecteur :first-child avec la balise HTML em
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
p em:first-child {
background: #82b534;
}
</style>
</head>
<body>
<h2>:first-child selector example</h2>
<article>
<p>Here is a <em>some</em> text. This is a <em>example</em>.</p>
<p>Here is a <em>some</em> text. This is a <em>example</em>.</p>
<p>Here is a <em>some</em> text. This is a <em>example</em>.</p>
</article>
</body>
</html>Avec la balise <ul>
:first-child fonctionne à chaque niveau d'imbrication. Le premier élément de la liste externe et le premier élément de la liste imbriquée correspondent tous deux à ul li:first-child.
Exemple du sélecteur :first-child avec la balise HTML ul
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
ul li {
color: blue;
}
ul li:first-child {
color: #8ebf42;
font-weight: bold;
}
</style>
</head>
<body>
<h2>:first-child selector example</h2>
<ul>
<li>List Item 1</li>
<li>List Item 2</li>
<li>
List Item 3
<ul>
<li>List Item 3.1</li>
<li>List Item 3.2</li>
<li>List Item 3.3</li>
</ul>
</li>
</ul>
</body>
</html>Compatibilité des navigateurs
:first-child est pris en charge par tous les navigateurs modernes et fonctionne dans Internet Explorer 9 et les versions ultérieures. Il fait partie de CSS Level 2 et est resté inchangé dans Selectors Level 3 et Level 4, vous pouvez donc l'utiliser sans aucun préfixe vendeur.
Sélecteurs associés
:last-child— styliser le dernier élément d'un groupe:first-of-type— le premier élément d'un type donné, peu importe ce qui le précède:only-child— correspondre à un élément qui n'a pas de frères et sœurs:nth-child()— correspondre par position avec une formule (:first-childéquivaut à:nth-child(1))