Bizga ul ro'yxati va ol ro'yxati bo'lsin.
<ul>
<li>text</li>
<li>text</li>
<li>text</li>
<li>text</li>
<li>text</li>
</ul>
<ol>
<li>text</li>
<li>text</li>
<li>text</li>
<li>text</li>
<li>text</li>
</ol>
Keling, ushbu ro'yxatlardagi teglarni qizil rangga bo'yaymiz.
li {
color: red;
}
Keling, ul list teglarini qizil rangga, ol list teglarini esa yashil rangga bo'yashni xohlaymiz.
Bunday holda, avlodlar selektori bizga yordam beradi. Bu sizga teglarni ota-onalariga ko'ra tanlash imkonini beradi. Buning uchun siz ota selektorini va bo'sh joy orqali - nasl selektorini ko'rsatishingiz kerak. Bizning holatda ul li selektori ul ro‘yxatidagi barcha li teglarni tanlaydi, ol li selektori esa ol ro‘yxatidan barcha li teglarini tanlaydi. Biz ularni kerakli ranglarda bo'yab qo'yamiz.
ul li {
color: red;
}
ol li {
color: green;
}
Nasl selektori ikkita selektor tegidan iborat bo'lishi shart emas - ularning istalgan soni bo'sh joy orqali yozilishi mumkin. Quyidagi kodda, masalan, li tegi ichidagi barcha i teglar tanlangan, ular o'z navbatida ul tegi ichida joylashgan.
ul li i {
color: red;
}