Selettore figlio in CSS

Supponiamo di avere il seguente codice:

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

Supponiamo di voler selezionare tutti i tag i che sono discendenti dei paragrafi. Facciamolo:

p i {
	color: red;
}

Risultato dell'esecuzione del codice:

Ora selezioniamo i tag i che sono figli diretti dei nostri paragrafi. In questo ci aiuterà il selettore figlio >.

Per capire come usarlo, confrontiamolo con il selettore di discendenti. Così: p i - selezioneremo tutti i corsivi all'interno dei paragrafi, mentre così: p > i - solo i corsivi che sono figli diretti dei paragrafi.

Applichiamo questo selettore al nostro codice HTML:

p > i {
	color: red;
}

Risultato dell'esecuzione del codice:

È dato il seguente codice:

<ul>
	<li>
		<i>italic</i>
		<b>bold</b>
		<b><i>bold italic</i></b>
	</li>
	<li>
		<i>italic</i>
		<b>bold</b>
		<b><i>bold italic</i></b>
	</li>
</ul>

Colorate in rosso solo i tag b che sono figli diretti dei tag li.