Selectorul copil în CSS

Să presupunem că avem următorul cod:

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

Să presupunem că vrem să selectăm toate tag-urile i, care sunt descendenți ai paragrafelor. Să facem acest lucru:

p i {
	color: red;
}

Rezultatul executării codului:

Acum să selectăm acele tag-uri i, care sunt descendenți imediați ai paragrafelor noastre. În acest lucru ne va ajuta selectorul copil >.

Pentru a înțelege cum să îl folosim, să îl comparăm cu selectorul de descendenți. Iată așa: p i - vom selecta toate cursivele din interiorul paragrafelor, iar așa: p > i - doar cursivele care sunt descendenți imediați ai paragrafelor.

Să aplicăm acest selector codului nostru HTML:

p > i {
	color: red;
}

Rezultatul executării codului:

Este dat următorul cod:

<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>

Colorați în roșu doar acele tag-uri b, care sunt descendenți imediați ai tag-urilor li.