Selektor dziecka w CSS

Załóżmy, że mamy następujący kod:

<p>
	tekst <b><i>pogrubiona kursywa</i></b>
</p>
<p>
	tekst <i>zwykła kursywa</i>
</p>

Załóżmy, że chcemy wybrać wszystkie znaczniki i, które są potomkami akapitów. Zróbmy to:

p i {
	color: red;
}

Wynik wykonania kodu:

Spróbujmy teraz wybrać tylko te znaczniki i, które są bezpośrednimi dziećmi naszych akapitów. Pomóc nam w tym może selektor dziecka >.

Aby zrozumieć, jak go używać, porównajmy go z selektorem potomków. O tak: p i - wybierzemy wszystkie kursywy wewnątrz akapitów, a tak: p > i - tylko kursywy, które są bezpośrednimi dziećmi akapitów.

Zastosujmy ten selektor do naszego kodu HTML:

p > i {
	color: red;
}

Wynik wykonania kodu:

Dany jest następujący kod:

<ul>
	<li>
		<i>kursywa</i>
		<b>pogrubienie</b>
		<b><i>pogrubiona kursywa</i></b>
	</li>
	<li>
		<i>kursywa</i>
		<b>pogrubienie</b>
		<b><i>pogrubiona kursywa</i></b>
	</li>
</ul>

Pokoloruj na czerwono tylko te znaczniki b, które są bezpośrednimi dziećmi znaczników li.