Combinateur enfant
Baseline
Widely available
Cette fonctionnalité est bien établie et fonctionne sur de nombreux appareils et versions de navigateurs. Elle est disponible sur tous les navigateurs depuis juillet 2015.
Le combinateur enfant (>) est placé entre deux sélecteurs CSS. Il cible uniquement les éléments correspondant au second sélecteur qui sont des enfants directs des éléments correspondant au premier.
/* Les éléments <li> qui sont des enfants d'une liste "mon-truc" */
ul.mon-truc > li {
margin: 2em;
}
Les éléments correspondant au second sélecteur doivent être les enfants immédiats des éléments correspondant au premier sélecteur. C'est plus strict que le combinateur de descendant, qui cible tous les éléments correspondant au second sélecteur pour lesquels il existe un élément ancêtre correspondant au premier sélecteur, peu importe le nombre de « sauts » dans le DOM.
Syntaxe
/* L'espace autour du combinateur > est optionnel mais recommandé. */
selector1 > selector2 { /* propriétés de style */ }
Exemples
CSS
span {
background-color: aqua;
}
div > span {
background-color: yellow;
}
HTML
<div>
<span
>Premier span du div.
<span>Deuxième span, dans un span dans un div.</span>
</span>
</div>
<span>Troisième span, en dehors de tout div.</span>
Résultat
Spécifications
| Specification |
|---|
| Selectors Level 4 # child-combinators |