CSS-da avlod selektorlari

Faraz qilaylik, bizda ul ro‘yxati va ol ro‘yxati mavjud:

<ul>
	<li>matn</li>
	<li>matn</li>
	<li>matn</li>
	<li>matn</li>
	<li>matn</li>
</ul>
<ol>
	<li>matn</li>
	<li>matn</li>
	<li>matn</li>
	<li>matn</li>
	<li>matn</li>
</ol>

Keling, ushbu ro‘yxatlardagi li teglarini qizil rangga bo‘yaylik:

li {
	color: red;
}

Endi faraz qilaylik, ul ro‘yxatidagi li teglarini qizil rangga, ol ro‘yxatidagi li teglarini esa yashil rangga bo‘yamoqchimiz.

Bunday holatda avlod selektori yordam beradi. U tegni ularning ota-onalari bo‘yicha tanlash imkonini beradi. Buning uchun ota-ona selektorini, so‘ng bo‘shliq orqali avlod selektorini ko‘rsatish kerak. Bizning holatda ul li selektori ul ro‘yxatidagi barcha li teglarini tanlaydi, ol li selektori esa ol ro‘yxatidagi barcha li teglarini tanlaydi. Keling ularni kerakli ranglarga bo‘yaylik:

ul li {
	color: red;
}
ol li {
	color: green;
}

Avlod selektorlari faqat ikkita teg selektoridan iborat bo‘lishi shart emas - ular bo‘shliq bilan ajratilgan istalgan miqdorda bo‘lishi mumkin. Masalan, quyidagi kodda ul tegining ichida joylashgan li teglarining o‘zida joylashgan barcha i teglari tanlanadi:

ul li i {
	color: red;
}

Quyidagi kod berilgan:

<ul>
	<li>matn <i>kursiv</i></li>
	<li>matn <i>kursiv</i></li>
	<li>matn <i>kursiv</i></li>
	<li>matn <i>kursiv</i></li>
</ul>

<p>
	abzas matni <i>kursiv</i>
</p>
<p>
	abzas matni <i>kursiv</i>
</p>

ul teglaridagi kursivni qizil rangga, p teglaridagi kursivni esa yashil rangga bo‘yang.

Quyidagi kod berilgan:

<p>
	abzas matni <b><i>qalin kursiv</i></b>
</p>
<p>
	abzas matni <i>kursiv</i>
</p>

p tegining ichida joylashgan b tegining o‘zida joylashgan kursivni qizil rangga bo‘yang.