Селектор потомака у CSS-у

Претпоставимо да имамо неподређени списак ul и подређени списак 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>

Хајде да обојимо тагове li у овим листама у црвену боју:

cssli {
  color: red;
}

Претпоставимо сада да желимо да обојимо тагове li неподређене листе ul у црвену боју, а тагове li подређене листе ol у зелену.

У том случају нам може помоћи селектор потомака. Он омогућава да бирамо тагове на основу њиховог родитеља. За то је потребно навести селектор родитеља, а затим размак и селектор потомка. У нашем случају, селектор ul li ће изабрати све тагове li из неподређене листе ul, а селектор ol li ће изабрати све тагове li из подређене листе ol. Хајде да их обојимо у жељене боје:

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

Селектор потомака не мора нужно да се састоји од два селектора тагова – може их бити било колико, написаних кроз размак. У следећем коду, на пример, бирају се сви тагови i који се налазе унутар тага li, који се заузврат налазе унутар тага ul:

cssul li i {
  color: red;
}

html<ul>
  <li>text <i>italic</i></li>
  <li>text <i>italic</i></li>
  <li>text <i>italic</i></li>
  <li>text <i>italic</i></li>
</ul>

<p>
  paragraph text <i>italic</i>
</p>
<p>
  paragraph text <i>italic</i>
</p>

html<p>
  paragraph text <b><i>bold italic</i></b>
</p>
<p>
  paragraph text <i>italic</i>
</p>