Selektor potomkov v CSS

Majme zoznam ul a zoznam 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>

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

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

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

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 odseku <i>kurzíva</i>
</p>
<p>
  text odseku <i>kurzíva</i>
</p>

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