Selettore di discendenti in CSS

Supponiamo di avere una lista ul e una lista ol:

<ul>
	<li>testo</li>
	<li>testo</li>
	<li>testo</li>
	<li>testo</li>
	<li>testo</li>
</ul>
<ol>
	<li>testo</li>
	<li>testo</li>
	<li>testo</li>
	<li>testo</li>
	<li>testo</li>
</ol>

Coloriamo i tag li in queste liste di rosso:

li {
	color: red;
}

Supponiamo ora di voler colorare i tag li della lista ul in rosso, e i tag li della lista ol in verde.

In questo caso ci aiuterà il selettore dei discendenti. Permette di selezionare i tag in base al loro genitore. Per fare ciò, è necessario specificare il selettore del genitore, e dopo uno spazio - il selettore del discendente. Nel nostro caso il selettore ul li selezionerà tutti i tag li della lista ul, mentre il selettore ol li - selezionerà tutti i tag li della lista ol. Coloriamoli nei colori desiderati:

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

Il selettore di discendenti non deve necessariamente essere composto da due selettori di tag - possono essercene un numero qualsiasi, scritti separati da spazio. Nel codice seguente, ad esempio, vengono selezionati tutti i tag i che si trovano all'interno del tag li, che a loro volta si trovano all'interno del tag ul:

ul li i {
	color: red;
}

È dato il seguente codice:

<ul>
	<li>testo <i>corsivo</i></li>
	<li>testo <i>corsivo</i></li>
	<li>testo <i>corsivo</i></li>
	<li>testo <i>corsivo</i></li>
</ul>

<p>
	testo paragrafo <i>corsivo</i>
</p>
<p>
	testo paragrafo <i>corsivo</i>
</p>

Colorate in rosso il corsivo dei tag ul, e in verde il corsivo dei tag p.

È dato il seguente codice:

<p>
	testo paragrafo <b><i>grassetto corsivo</i></b>
</p>
<p>
	testo paragrafo <i>corsivo</i>
</p>

Colorate in rosso il corsivo che si trova all'interno del tag b, che a sua volta si trova all'interno del tag p.