Selektor potomków w CSS

Załóżmy, że mamy listę ul i listę ol:

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

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

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

ul li i {
	color: red;
}

Dany jest następujący kod:

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

Pokoloruj na czerwono kursywę ze znaczników ul, a na zielono - kursywę ze znaczników p.

Dany jest następujący kod:

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

Pokoloruj na czerwono kursywę, znajdującą się wewnątrz znacznika b, który z kolei znajduje się wewnątrz znacznika p.