Dcérsky selektor v CSS

Majme nasledujúci kód:

<p>
	text <b><i>tučné kurzíva</i></b>
</p>
<p>
	text <i>len kurzíva</i>
</p>

Povedzme, že chceme vybrať všetky elementy i, ktoré sú potomkami odsekov. Urobme to:

p i {
	color: red;
}

Výsledok vykonania kódu:

Poďme teraz vybrať tie elementy i, ktoré sú priamymi potomkami našich odsekov. S tým nám pomôže dcérsky selektor >.

Aby sme pochopili, ako ho používať, poďme ho porovnať s selektorom potomkov. Takto: p i - vyberieme všetky kurzívy vnútri odsekov, ale takto: p > i - iba kurzívy, ktoré sú priamymi potomkami odsekov.

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

p > i {
	color: red;
}

Výsledok vykonania kódu:

Daný je nasledujúci 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>

Zafarbite na červeno len tie elementy b, ktoré sú priamymi potomkami elementov li.