ЦСС дечји селектор

Рецимо да имамо следећи код:

<p>
	текст <b><i>подебљано курзив</i></b>
</p>
<p>
	текст <i>само курзив</i>
</p>

Рецимо да желимо да изаберемо све i тагове који су потомци параграфа. Урадимо то:

p i {
	color: red;
}

Резултат извршавања кода:

Хајде сада да изаберемо оне i тагове који су непосредни потомци наших параграфа. У томе ће нам помоћи дечји селектор >.

Да бисмо разумели како се њиме користи, хајде да га упоредимо са селектором потомака. Ево овако: p i - изабраћемо све курзиве унутар параграфа, а овако: p > i - само курзиве који су непосредни потомци параграфа.

Применимо овај селектор на наш ХТМЛ код:

p > i {
	color: red;
}

Резултат извршавања кода:

Да је следећи код:

<ul>
	<li>
		<i>курзив</i>
		<b>подебљано</b>
		<b><i>подебљано курзив</i></b>
	</li>
	<li>
		<i>курзив</i>
		<b>подебљано</b>
		<b><i>подебљано курзив</i></b>
	</li>
</ul>

Обојите у црвену само оне b тагове, који су непосредни потомци li тагова.