Gyermek szelektor a CSS-ben

Tegyük fel, hogy a következő kódunk van:

<p>
	szöveg <b><i>félkövér dőlt</i></b>
</p>
<p>
	szöveg <i>csak dőlt</i>
</p>

Tegyük fel, hogy ki szeretnénk választani az összes i elemet, amelyek a bekezdések leszármazottai. Tegyük ezt meg:

p i {
	color: red;
}

A kód végrehajtásának eredménye:

Most válasszuk ki azokat a i elemeket, amelyek a bekezdéseink közvetlen leszármazottai. Ebben a gyermek szelektor > segít.

Ahhoz, hogy megértsük, hogyan kell használni, hasonlítsuk össze a leszármazott szelektorral. Így: p i - kiválasztjuk az összes dőlt betűt a bekezdéseken belül, de így: p > i - csak a bekezdések közvetlen leszármazottjai közül választja ki a dőlt betűket.

Alkalmazzuk ezt a szelektort a HTML kódunkra:

p > i {
	color: red;
}

A kód végrehajtásának eredménye:

A következő kód adott:

<ul>
	<li>
		<i>dőlt</i>
		<b>félkövér</b>
		<b><i>félkövér dőlt</i></b>
	</li>
	<li>
		<i>dőlt</i>
		<b>félkövér</b>
		<b><i>félkövér dőlt</i></b>
	</li>
</ul>

Színezd pirosra csak azokat a b elemeket, amelyek a li elemek közvetlen leszármazottjai.