Selektor potomků v CSS

Předpokládejme, že máme seznam ul a seznam ol:

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

cssli {
  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:

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

cssul li i {
  color: red;
}

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

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