ဆက်ခံရွေးချယ်မှုတွင် အစပြုသူများ၏ အမှား

အောက်ပါ selector ကို ကြည့်ပါ။

p.eee {
	color: red;
}

အဆိုပါ selector သည် class eee ရှိသော စာပိုဒ်များကို ရွေးချယ်မည်ဆိုသည်ကို သင်သိပြီးဖြစ်သင့်ပါသည်။ ဥပမာ၊ ဤအရာများ-

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

ယခု ဤ selector ကို ကြည့်ပါ။

p .eee {
	color: green;
}

ဤ selector သည် ယခင်ကထက် ကွဲပြားချက်မှာ tag အမည်နှင့် class အမည်ကြားတွင် ခြားနားချက် (space) တစ်ခု ရှိခြင်းဖြစ်သည်။ ထိုခြားနားချက်သည် ဆက်ခံရွေးချယ်မှု (descendant selector) ကို ကိုယ်စားပြုပါသည်။ ဆိုလိုသည်မှာ ဤကိစ္စတွင် ကျွန်ုပ်တို့သည် စာပိုဒ်များအတွင်း၌ တည်ရှိသော class eee ရှိသည့် element အားလုံးကို ရွေးချယ်နေခြင်းဖြစ်သည်။ ဥပမာ၊ ဤ selector သည် အောက်ပါ span များကို ရွေးချယ်မည်။

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

ကုဒ် run ထားသော ရလဒ်။

ထို့ကြောင့် နောက်တစ်ကြိမ်။ p.eee - ထိုသို့သော selector သည် class eee ရှိသည့် စာပိုဒ်များကို ရွေးချယ်ပါသည်။ သို့သော် ကျွန်ုပ်ဤသို့လုပ်ပါက p .eee၊ ထိုအခါ စာပိုဒ်များ အတွင်း၌ တည်ရှိသော class eee ရှိသည့် element အားလုံးကို ရွေးချယ်ပါမည်။ ထိုကွာခြားချက်ကို ခံစားနားလည်ပါ။

အောက်ဖော်ပြပါ ကုဒ်ရှိ selector သည် ဘာကို ရွေးချယ်သည်ကို ရှင်းပြပါ။ ထို့နောက် ထို selector နှင့် ကိုက်ညီသော HTML ကုဒ်ကို ရေးပါ။ Selector ပါသော ကုဒ်မှာ-

p.bbb {
	color: red;
}

p .bbb {
	color: red;
}

.eee p.bbb {
	color: red;
}

.eee p .bbb {
	color: red;
}