CSSda farzand selektori

Quyidagi kodimiz bor deb faraz qilaylik:

<p>
	matn <b><i>qalin kursiv</i></b>
</p>
<p>
	matn <i>shunchaki kursiv</i>
</p>

Abzaslarning avlodlari bo‘lgan barcha i teglarini tanlamoqchi deb faraz qilaylik. Buni amalga oshiramiz:

p i {
	color: red;
}

Kodni bajarish natijasi:

Keling endi, abzalarimizning bevosita farzandlari bo‘lgan i teglarini tanlaylik. Bunda farzand selektori > bizga yordam beradi.

Undan qanday foydalanishni tushunish uchun, keling uni avlod selektori bilan solishtiramiz. Shunday: p i - biz abzalar ichidagi barcha kursivlarni tanlaymiz, ammo shunday: p > i - faqatgina abzalarning bevosita farzandlari bo‘lgan kursivlarni tanlaydi.

Keling bu selektorni bizning HTML kodimizga qo‘llaylik:

p > i {
	color: red;
}

Kodni bajarish natijasi:

Quyidagi kod berilgan:

<ul>
	<li>
		<i>kursiv</i>
		<b>qalin</b>
		<b><i>qalin kursiv</i></b>
	</li>
	<li>
		<i>kursiv</i>
		<b>qalin</b>
		<b><i>qalin kursiv</i></b>
	</li>
</ul>

Faqatgina li teglarining bevosita farzandlari bo‘lgan b teglarini qizil rangga bo‘yang.