Dceřiný selektor v CSS

Předpokládejme, že máme následující kód:

<p>
	text <b><i>tučná kurzíva</i></b>
</p>
<p>
	text <i>pouze kurzíva</i>
</p>

Předpokládejme, že chceme vybrat všechny tagy i, které jsou potomky odstavců. Udělejme to:

p i {
	color: red;
}

Výsledek provedení kódu:

Nyní vyberme pouze ty tagy i, které jsou přímými potomky našich odstavců. S tím nám pomůže dceřiný selektor >.

Abyste pochopili, jak jej používat, pojďme jej porovnat s selektorem potomků. Takhle: p i - vybereme všechny kurzívy uvnitř odstavců, ale takhle: p > i - pouze kurzívy, které jsou přímými potomky odstavců.

Aplikujme tento selektor na náš HTML kód:

p > i {
	color: red;
}

Výsledek provedení kódu:

Je dán následující kód:

<ul>
	<li>
		<i>kurzíva</i>
		<b>tučný</b>
		<b><i>tučná kurzíva</i></b>
	</li>
	<li>
		<i>kurzíva</i>
		<b>tučný</b>
		<b><i>tučná kurzíva</i></b>
	</li>
</ul>

Obarvěte červeně pouze ty tagy b, které jsou přímými potomky tagů li.