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 тегдерин кызыл түскө боёңуз.