Детски селектор во 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.