Selektor potomków w CSS

Załóżmy, że mamy listę ul i listę 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>

Pokolorujmy znaczniki li na tych listach na czerwono:

cssli {
  color: red;
}

Załóżmy teraz, że chcemy pokolorować znaczniki li listy ul na czerwono, a znaczniki li listy ol - na zielono.

W tym przypadku pomoże nam selektor potomków. Pozwala on wybierać znaczniki na podstawie ich rodzica. Aby to zrobić, należy podać selektor rodzica, a po spacji - selektor potomka. W naszym przypadku selektor ul li wybierze wszystkie znaczniki li z listy ul, a selektor ol li - wybierze wszystkie znaczniki li z listy ol. Pokolorujmy je na odpowiednie kolory:

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

Selektor potomków nie musi koniecznie składać się z dwóch selektorów znaczników - może ich być dowolna liczba, zapisana przez spacją. W poniższym kodzie, na przykład, wybierane są wszystkie znaczniki i, znajdujące się wewnątrz znacznika li, które z kolei znajdują się wewnątrz znacznika 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>