Seletor filho em CSS

Suponha que temos o seguinte código:

<p>
	texto <b><i>negrito itálico</i></b>
</p>
<p>
	texto <i>apenas itálico</i>
</p>

Suponha que queremos selecionar todas as tags i que são descendentes de parágrafos. Vamos fazer isso:

p i {
	color: red;
}

Resultado da execução do código:

Agora vamos selecionar as tags i que são descendentes diretos de nossos parágrafos. O seletor filho > nos ajudará nisso.

Para entender como usá-lo, vamos compará-lo com o seletor de descendentes. Assim: p i - selecionaremos todos os itálicos dentro dos parágrafos, e assim: p > i - apenas os itálicos que são descendentes diretos dos parágrafos.

Vamos aplicar este seletor ao nosso código HTML:

p > i {
	color: red;
}

Resultado da execução do código:

Dado o seguinte código:

<ul>
	<li>
		<i>itálico</i>
		<b>negrito</b>
		<b><i>negrito itálico</i></b>
	</li>
	<li>
		<i>itálico</i>
		<b>negrito</b>
		<b><i>negrito itálico</i></b>
	</li>
</ul>

Pinte de vermelho apenas as tags b que são descendentes diretos das tags li.