Дъщерен селектор в CSS

Да предположим, че имаме следния код:

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

Да предположим, че искаме да изберем всички тагове i, които са наследници на параграфи. Нека направим това:

p i {
	color: red;
}

Резултат от изпълнението на кода:

Нека сега изберем само онези тагове i, които са непосредствени наследници на нашите параграфи. В това ще ни помогне дъщерният селектор >.

За да разберем как да го използваме, нека го сравним със селектора за наследници. Ето така: p i - ще изберем всички курсиви вътре в параграфите, а ето така: p > i - само курсивите, които са непосредствени наследници на параграфите.

Нека приложим този селектор към нашия HTML код:

p > i {
	color: red;
}

Резултат от изпълнението на кода:

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

<ul>
	<li>
		<i>italic</i>
		<b>bold</b>
		<b><i>bold italic</i></b>
	</li>
	<li>
		<i>italic</i>
		<b>bold</b>
		<b><i>bold italic</i></b>
	</li>
</ul>

Оцветете в червено само онези тагове b, които са непосредствени наследници на таговете li.