Yangi boshlanuvchilarning vorislar selektoridagi xatosi

Quyidagi selektorga qarang:

p.eee {
	color: red;
}

Siz allaqachon bilishingiz kerak, bunday selektor eee klassiga ega abzatslarni tanlaydi. Masalan, mana bulalar:

<p class="eee">
	lorem ipsum
</p>
<p class="eee">
	lorem ipsum
</p>

Endi mana bu selektorga qarang:

p .eee {
	color: green;
}

Bu selektor oldingisidan shu bilan farq qiladiki, unda tegnomi va klass nomi orasida bosh joy turadi. Bu bosh joy vorislar selektorini ifodalaydi. Ya'ni bu holda biz abzatslar ichida joylashgan eee klassiga ega barcha elementlarni tanlaymiz. Masalan, bu selektor quyidagi spanlarni tanlaydi:

<p>
	lorem <span class="eee">ipsum</span>
</p>
<p>
	lorem <span class="eee">ipsum</span>
</p>

Kodni bajarish natijasi:

Shunday qilib, yana bir bor: p.eee - bunday selektor eee klassiga ega abzatslarni tanlaydi. Lekin agar men shunday qilsam: p .eee, unda men abzatslar ichida joylashgan eee klassiga ega barcha elementlarni tanlayman. Bu farqni his eting.

Quyida keltirilgan koddagi selektor nimalarni tanlashini tushuntiring. Keyin ushbu selektorga mos keladigan HTML kodini yozing. Mana selektorli kod:

p.bbb {
	color: red;
}

Quyida keltirilgan koddagi selektor nimalarni tanlashini tushuntiring. Keyin ushbu selektorga mos keladigan HTML kodini yozing. Mana selektorli kod:

p .bbb {
	color: red;
}

Quyida keltirilgan koddagi selektor nimalarni tanlashini tushuntiring. Keyin ushbu selektorga mos keladigan HTML kodini yozing. Mana selektorli kod:

.eee p.bbb {
	color: red;
}

Quyida keltirilgan koddagi selektor nimalarni tanlashini tushuntiring. Keyin ushbu selektorga mos keladigan HTML kodini yozing. Mana selektorli kod:

.eee p .bbb {
	color: red;
}