Селектор потомков в 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:

[code78]