Селектор нащадків на 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.