Селектор на потомци в CSS

Нека имаме списък ul и списък 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>

Нека оцветим елементите li в тези списъци в червено:

li {
	color: red;
}

Нека сега искаме да оцветим елементите li на списъка ul в червено, а елементите li на списъка ol - в зелено.

В този случай ще ни помогне селекторът на потомци. Той позволява избиране на елементи според техния родител. За целта трябва да посочите селектора на родителя, а след това чрез интервал - селектора на потомка. В нашия случай селекторът ul li ще избере всички елементи li от списъка ul, а селекторът ol li - ще избере всички елементи li от списъка ol. Нека ги оцветим в съответните цветове:

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

Селекторът на потомци не е задължително да се състои само от два селектора за елементи - може да има произволен брой, разделени с интервал. В следващия код, например, се избират всички елементи i, които се намират вътре в елемент li, които от своя страна се намират вътре в елемент ul:

ul li i {
	color: red;
}

Даден е следният код:

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

Оцветете в червено курсива от елементите ul, а в зелен цвят - курсива от елементите p.

Даден е следният код:

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

Оцветете в червено курсива, намиращ се вътре в елемента b, който от своя страна се намира вътре в елемента p.