Sélecteur d'enfant en CSS

Supposons que nous ayons le code suivant :

<p>
	texte <b><i>gras italique</i></b>
</p>
<p>
	texte <i>juste italique</i>
</p>

Supposons que nous voulions sélectionner toutes les balises i qui sont des descendants de paragraphes. Faisons-le :

p i {
	color: red;
}

Résultat de l'exécution du code :

Sélectionnons maintenant les balises i qui sont des descendants directs de nos paragraphes. Le sélecteur d'enfant > nous y aidera.

Pour comprendre comment l'utiliser, comparons-le au sélecteur de descendants. Comme ceci : p i - nous sélectionnerons toutes les italiques à l'intérieur des paragraphes, et comme ceci : p > i - seulement les italiques qui sont des descendants directs des paragraphes.

Appliquons ce sélecteur à notre code HTML :

p > i {
	color: red;
}

Résultat de l'exécution du code :

Voici le code suivant :

<ul>
	<li>
		<i>italique</i>
		<b>gras</b>
		<b><i>gras italique</i></b>
	</li>
	<li>
		<i>italique</i>
		<b>gras</b>
		<b><i>gras italique</i></b>
	</li>
</ul>

Colorez en rouge uniquement les balises b qui sont des descendants directs des balises li.