Selektor potomkov v CSS

Majme zoznam ul a zoznam ol:

<ul>
	<li>text</li>
	<li>text</li>
	<li>text</li>
	<li>text</li>
	<li>text</li>
</ul>
<ol>
	<li>text</li>
	<li>text</li>
	<li>text</li>
	<li>text</li>
	<li>text</li>
</ol>

Nastavme farbu tagov li v týchto zoznamoch na červenú:

li {
	color: red;
}

Teraz povedzme, že chceme nastaviť farbu tagov li zoznamu ul na červenú, a tagov li zoznamu ol - na zelenú.

V tomto prípade nám pomôže selektor potomkov. Umožňuje vyberať tagy podľa ich rodiča. Na to je potrebné uviesť selektor rodiča, a cez medzeru - selektor potomka. V našom prípade selektor ul li vyberie všetky tagy li zo zoznamu ul, a selektor ol li - vyberie všetky tagy li zo zoznamu ol. Nastavme im potrebné farby:

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

Selektor potomkov nemusí nevyhnutne pozostávať z dvoch selektorov tagov - môže ich byť ľubovoľné množstvo, zapísané cez medzeru. V nasledujúcom kóde sa napríklad vyberajú všetky tagy i, ktoré sa nachádzajú vnútri tagu li, ktoré sa zasa nachádzajú vnútri tagu ul:

ul li i {
	color: red;
}

Daný je nasledujúci kód:

<ul>
	<li>text <i>kurzíva</i></li>
	<li>text <i>kurzíva</i></li>
	<li>text <i>kurzíva</i></li>
	<li>text <i>kurzíva</i></li>
</ul>

<p>
	text odseku <i>kurzíva</i>
</p>
<p>
	text odseku <i>kurzíva</i>
</p>

Nastavte červenú farbu kurzíve z tagov ul, a zelenú farbu - kurzíve z tagov p.

Daný je nasledujúci kód:

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

Nastavte červenú farbu kurzíve, ktorá sa nachádza vnútri tagu b, ktorý sa zasa nachádza vnútri tagu p.