Sélecteur de descendants en CSS

Supposons que nous ayons une liste ul et une liste ol :

<ul>
	<li>text</li>
	<li>text</li>
	<li>text</li>
	<li>text</li>
	<li>text</li>
</ul>
<ol>
	<li>text</li>
	<li>text</li>
	<li>text</li>
	<li>text</li>
	<li>text</li>
</ol>

Colorons les balises li dans ces listes en rouge :

li {
	color: red;
}

Supposons maintenant que nous voulions colorer les balises li de la liste ul en rouge, et les balises li de la liste ol en vert.

Dans ce cas, le sélecteur de descendants nous aidera. Il permet de sélectionner les balises en fonction de leur parent. Pour ce faire, il faut indiquer le sélecteur du parent, puis, après un espace, le sélecteur du descendant. Dans notre cas, le sélecteur ul li sélectionnera toutes les balises li de la liste ul, et le sélecteur ol li sélectionnera toutes les balises li de la liste ol. Colorons-les aux couleurs souhaitées :

ul li {
	color: red;
}
ol li {
	color: green;
}

Le sélecteur de descendants ne doit pas nécessairement être composé de deux sélecteurs de balises - il peut y en avoir un nombre quelconque, écrits avec des espaces. Dans le code suivant, par exemple, toutes les balises i situées à l'intérieur d'une balise li, qui elles-mêmes se trouvent à l'intérieur d'une balise ul, sont sélectionnées :

ul li i {
	color: red;
}

Code donné :

<ul>
	<li>text <i>italic</i></li>
	<li>text <i>italic</i></li>
	<li>text <i>italic</i></li>
	<li>text <i>italic</i></li>
</ul>

<p>
	paragraph text <i>italic</i>
</p>
<p>
	paragraph text <i>italic</i>
</p>

Coloriez en rouge l'italique des balises ul, et en vert l'italique des balises p.

Code donné :

<p>
	paragraph text <b><i>bold italic</i></b>
</p>
<p>
	paragraph text <i>italic</i>
</p>

Coloriez en rouge l'italique se trouvant à l'intérieur de la balise b, qui elle-même se trouve à l'intérieur de la balise p.