Auteur: Jérôme Forget. Publié le 12 février 2007.
Le sélecteur descendant permet d'atteindre un élément qui est lui-même un descendant d'un autre élément (par exemple, les éléments em qui sont dans un élément h1). Le sélecteur descendant est indiqué par un espace blanc entre les deux éléments. L'exemple suivant vous montre comment utiliser un sélecteur descendant pour colorer en bleu les éléments li descendants de listes ul (et non des listes ol) :
ul li {
color: blue;
}
Par contre, dans cet autre exemple, tous les éléments li seront bleu, car tous les éléments li sont des descendants d'une liste ul (ul est l'ancêtre de tous les éléments li):
<ul>
<li>Premier item</li>
<li>Deuxième item</li>
<li>Troisième item</li>
<li>La quatrième a une liste imbriquée :
<ol>
<li>Premier sous-item</li>
<li>Deuxième sous-item</li>
</ol>
</li>
</ul>
Le sélecteur descendant peut permettre d'atteindre des éléments enfouis dans la structure du document XHTML, même sans attribut de classe ou d'identifiant. En créant une chaîne de sélecteurs comme celle-ci, nous pouvons atteindre les éléments strong à l'intérieur des cite dans les blockquote eux-mêmes dans des div :
div blockquote cite strong {
color: orange;
}
Toutes sortes d'autres sélecteurs peuvent aussi être combiné de cette façon. Disons que nous voulons sélectionner les éléments li dans une liste ul avec un attribut class de ingredients dans un div avec un attribut id de recette :
div#recette ul.ingredients li {
font-size: 10px;
}
Comme vous voyez, ce sélecteur est extrêmement puissant et utile. Cela explique sans doute qu'il est l'un des sélecteurs CSS les plus utilisés.