Combinateur de descendant
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 de descendant — généralement représenté par un seul caractère espace (« ») — combine deux sélecteurs de sorte que les éléments correspondant au second sélecteur sont sélectionnés s'ils ont un ancêtre (parent, parent du parent, parent du parent du parent, etc.) qui correspond au premier sélecteur. Les sélecteurs qui utilisent un combinateur de descendant sont appelés sélecteurs de descendant.
/* Les éléments <li> qui sont des descendants d'une liste "mon-truc" */
ul.mon-truc li {
margin: 2em;
}
Techniquement, le combinateur de descendant est constitué d'un ou plusieurs caractères d'espacement CSS — le caractère espace et/ou l'un des quatre caractères de contrôle : retour chariot, saut de page, saut de ligne et tabulation — placés entre deux sélecteurs en l'absence d'un autre combinateur. De plus, les caractères d'espacement qui composent le combinateur peuvent contenir n'importe quel nombre de commentaires CSS.
Syntaxe
selector1 selector2 {
/* propriétés de style */
}
Exemples
CSS
li {
list-style-type: disc;
}
li li {
list-style-type: circle;
}
HTML
<ul>
<li>
<div>Élément 1</div>
<ul>
<li>Sous-élément A</li>
<li>Sous-élément B</li>
</ul>
</li>
<li>
<div>Élément 2</div>
<ul>
<li>Sous-élément A</li>
<li>Sous-élément B</li>
</ul>
</li>
</ul>
Résultat
Spécifications
| Specification |
|---|
| Selectors Level 4 # descendant-combinators |