Селектар нашчадкаў у 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>