Seletor de descendentes em CSS

Suponha que temos uma lista ul e uma lista ol:

<ul>
	<li>texto</li>
	<li>texto</li>
	<li>texto</li>
	<li>texto</li>
	<li>texto</li>
</ul>
<ol>
	<li>texto</li>
	<li>texto</li>
	<li>texto</li>
	<li>texto</li>
	<li>texto</li>
</ol>

Vamos colorir as tags li nessas listas em vermelho:

li {
	color: red;
}

Agora, suponha que queremos colorir as tags li da lista ul em vermelho, e as tags li da lista ol - em verde.

Neste caso, o seletor de descendentes nos ajudará. Ele permite selecionar tags pelo seu elemento pai. Para isso, é necessário especificar o seletor do pai, e, após um espaço, o seletor do descendente. No nosso caso, o seletor ul li selecionará todas as tags li da lista ul, e o seletor ol li - selecionará todas as tags li da lista ol. Vamos colori-las nas cores desejadas:

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

O seletor de descendentes não precisa necessariamente consistir em dois seletores de tag - pode haver qualquer quantidade deles, escritos com espaços. No código a seguir, por exemplo, são selecionadas todas as tags i que estão dentro de uma tag li, que por sua vez estão dentro de uma tag ul:

ul li i {
	color: red;
}

Dado o seguinte código:

<ul>
	<li>texto <i>itálico</i></li>
	<li>texto <i>itálico</i></li>
	<li>texto <i>itálico</i></li>
	<li>texto <i>itálico</i></li>
</ul>

<p>
	texto do parágrafo <i>itálico</i>
</p>
<p>
	texto do parágrafo <i>itálico</i>
</p>

Pinte de vermelho o itálico das tags ul, e de verde - o itálico das tags p.

Dado o seguinte código:

<p>
	texto do parágrafo <b><i>negrito itálico</i></b>
</p>
<p>
	texto do parágrafo <i>itálico</i>
</p>

Pinte de vermelho o itálico que está dentro da tag b, que por sua vez está dentro da tag p.