Selektor potomků v CSS

Předpokládejme, že máme seznam ul a seznam 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>

Pojďme obarvit tagy li v těchto seznamech na červenou:

li {
	color: red;
}

Nyní předpokládejme, že chceme obarvit tagy li seznamu ul na červenou a tagy li seznamu ol na zelenou.

V tomto případě nám pomůže selektor potomků. Umožňuje vybírat tagy podle jejich rodiče. K tomu je třeba uvést selektor rodiče, a mezeru - selektor potomka. V našem případě selektor ul li vybere všechny tagy li ze seznamu ul a selektor ol li - vybere všechny tagy li ze seznamu ol. Obarvíme je na požadované barvy:

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

Selektor potomků nemusí nutně sestávat ze dvou selektorů tagů - může jich být libovolný počet, zapsaný mezerou. V následujícím kódu jsou například vybrány všechny tagy i, které se nacházejí uvnitř tagu li, které se zase nacházejí uvnitř tagu ul:

ul li i {
	color: red;
}

Je dán následující 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 odstavce <i>kurzíva</i>
</p>
<p>
	text odstavce <i>kurzíva</i>
</p>

Obarvěte na červenou kurzívu z tagů ul a na zelenou - kurzívu z tagů p.

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

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

Obarvěte na červenou kurzívu, která se nachází uvnitř tagu b, který se zase nachází uvnitř tagu p.