CSS-тегінің бала селекторы

Бізде келесі код бар делік:

<p>
	текст <b><i>қалың курсив</i></b>
</p>
<p>
	текст <i>жай курсив</i>
</p>

Абзацтардың туындылары болып табылатын барлық i тегтерін таңдайық делік. Мұны істейік:

p i {
	color: red;
}

Кодты орындау нәтижесі:

Енді біздің абзацтардың тікелей туындылары болып табылатын i тегтерін таңдайық. Бұл жағдайда бізге бала селекторы > көмектеседі.

Оны қалай пайдалану керектігін түсіну үшін, оны туындылар селекторымен салыстырайық. Мыналай: p i - біз абзацтар ішіндегі барлық курсивтерді таңдаймыз, ал мыналай: p > i - тек абзацтардың тікелей туындылары болып табылатын курсивтерді таңдаймыз.

Осы селекторды біздің HTML кодына қолданайық:

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>

Тек li тегтерінің тікелей туындылары болып табылатын b тегтерін қызыл түске бояңыз.