Селектор на потомци в 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>