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

Пусть у нас есть список ul и список ol:

<ul>
	<li>пункт</li>
	<li>пункт</li>
	<li>пункт</li>
	<li>пункт</li>
	<li>пункт</li>
</ul>
<ol>
	<li>пункт</li>
	<li>пункт</li>
	<li>пункт</li>
	<li>пункт</li>
	<li>пункт</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;
}

Дан следующий код:

<ul>
	<li>пункт <i>курсив</i></li>
	<li>пункт <i>курсив</i></li>
	<li>пункт <i>курсив</i></li>
	<li>пункт <i>курсив</i></li>
</ul>

<p>
	текст абзаца <i>курсив</i>
</p>
<p>
	текст абзаца <i>курсив</i>
</p>

Покрасьте в красный цвет курсив из тегов ul, а в зеленый цвет - курсив из тегов p.

Замечание

Селектор потомков не обязательно должен состоять из двух селекторов тегов - их может быть любое количество, записанное через пробел. В следующем коде, например, выбираются все теги i, находящиеся внутри тега li, которые в свою очередь находятся внутри тега ul:

ul li i {
	color: red;
}

Дан следующий код:

<p>
	текст абзаца <b><i>жирный курсив</i></b>
</p>
<p>
	текст абзаца <i>курсив</i>
</p>

Покрасьте в красный цвет курсив, находящийся внутри тега b, который в свою очередь находится внутри тега p.