Selectors (ရွေးချယ်ခြင်း)

အခြေခံ Selectors (၃) မျိုး

1. Element Selector (Tag နာမည်ဖြင့် ခေါ်ခြင်း)

ဒါကတော့ HTML tag ရဲ့ နာမည်ကို တိုက်ရိုက်ခေါ်သုံးလိုက်တဲ့ နည်းလမ်းပါ။ ဒီလိုသုံးလိုက်ရင် အဲဒီ tag နဲ့ သက်ဆိုင်တဲ့ နေရာတွေ အကုန်လုံးမှာ ဒီဇိုင်းတွေ ပြောင်းသွားမှာ ဖြစ်ပါတယ်။

/* <p> tag အားလုံး စာလုံးအနီ ဖြစ်သွားမယ် */
p {
  color: red;
}

2. Class Selector (အုပ်စုလိုက် ခေါ်ခြင်း) - အသုံးအများဆုံး

ဒီဇိုင်းတူတူ လိုချင်တဲ့ Element တွေကို class နာမည် တစ်ခုတည်းပေးပြီး ခေါ်သုံးတဲ့ နည်းလမ်းပါ။ class ကို ခေါ်သုံးတဲ့အခါ ရှေ့မှာ အစက် dot (.) လေး ခံပြီး ရေးပေးရပါတယ်။

<button class="btn">Click Me</button>
<button class="btn">Submit</button>

/* class="btn" ရှိတဲ့ element အားလုံး အပြာရောင် ဖြစ်မယ် */
.btn {
  background-color: blue;
  color: white;
}

3. ID Selector (တစ်ခုတည်းကို သီးသန့် ခေါ်ခြင်း)

Page တစ်မျက်နှာမှာမှ တစ်နေရာတည်း သီးသန့်ရှိမယ့် Element တွေ (ဥပမာ - Logo သို့မဟုတ် Header) အတွက် သုံးလေ့ရှိပါတယ်။ id ကို ခေါ်သုံးရင်တော့ ရှေ့မှာ Hash (#) သင်္ကေတလေး ခံပေးရပါတယ်။

<div id="header">Logo</div>

/* id="header" ရှိတဲ့ element တစ်ခုတည်း ပြောင်းမယ် */
#header {
  background-color: black;
}

ဘယ် Selector ကို ရွေးသုံးသင့်လဲ?

✅ Class Selector (.) ကို အများဆုံး အသုံးပြုသင့်ပါတယ်။ သူ့ကို နေရာတိုင်းမှာ ပြန်ခေါ်သုံးလို့ရတဲ့ (Reusable ဖြစ်တဲ့) အတွက် အရမ်းအဆင်ပြေပါတယ်။
⚠️ ID Selector (#) ကိုတော့ JavaScript နဲ့ တွဲသုံးတဲ့အခါ (သို့မဟုတ်) Page တစ်ခုမှာ တစ်နေရာတည်းစာ သီးသန့် သုံးချင်တဲ့အခါမျိုးမှာပဲ သုံးသင့်ပါတယ်။
⚠️ Element Selector ကိုတော့ Default အနေနဲ့ ပုံသေ Style တွေ သတ်မှတ်ဖို့လောက်ပဲ သုံးသင့်ပါတယ် ခင်ဗျာ။