CSS Selectors

CSS Selectors ကို အသုံးပြုဖို့ နည်း ၅ နည်းရှိပါတယ်။

1. Simple Selectors (သတ်မှတ်ထားသော element name တွေကို base ယူပြီး အသုံးပြုခြင်းဖြစ်ပါတယ်။)
2. Combinator selectors (အထူးပြုသတ်မှတ်ထားသော element ၂ ခုကို ပေါင်းပြီး အသုံးပြုခြင်း ဖြစ်ပါတယ်။)
3. Pseudo-class selectors (သတ်မှတ်ထားသော element name links တွေရဲ့ state မူတည်ပြီး အသုံးပြုခြင်း ဖြစ်ပါတယ်။)
4. Pseudo-elements selectors (သတ်မှတ်ထားသော style တစ်ခုချင်းစီ၏ အစိတ်အပိုင်းများကို element အနေနဲ့ အသုံးပြုခြင်း ဖြစ်ပါတယ်။)
5. Attribute selectors (သတ်မှတ်ထားသော element တစ်ခုချင်းစီ၏ attribute or attribute value တွေကို အသုံးပြုခြင်း ဖြစ်ပါတယ်။)

---

၁) Simple Selectors

Simple Selectors မှာ ID Selector, Class Selector ဆိုပြီး ရှိပါတယ်။

ID Selector ကတာ့ > # ကို ကိုယ်စားပြုပါတယ်။ Class Selector ကတော့ > . ကို ကိုယ်စားပြုပါတယ်။

ဥပမာ > #wrapper , container

၂) Combinator selectors

အထူးပြုသတ်မှတ်ထားသော element ၂ ခုကို ပေါင်းပြီး အသုံးပြုခြင်း ဖြစ်ပါတယ်။

ဥပမာ- div p{background-color: orange;}

၃) Pseudo-class selectors

Pseudo-class selectors မှာ active state, hover state တွေကို links အနေနဲ့ အဓိကထားပြီး အသုံးပြုခြင်းဖြစ်ပါတယ်။

ဥပမာ- a:link,a:hover, a:active, a:focus, div:hover{color: white;background-color: green;}

၄) Pseudo-elements selectors

Pseudo-elements selectors မှာ selector ကို class name တစ်ခုနဲ့ သုံးပြီး Pseudo-elements selectors နဲ့ တွဲသုံးခြင်းဖြစ်ပါတယ်။

ဥပမာ - p.center::before{background-color: blue;} > p က selector , .center က class, ::before က Pseudo-elements selectors ဖြစ်ပါတယ်။

၅) Attribute selectors

Attribute selectors မှာ element တစ်ခုချင်းအတွက် သူတို့နဲ့ သက်ဆိုင်တဲ့ attribute ကို အထူးပြုအနေနဲ့ သုံးခြင်းဖြစ်ပါတယ်။

ဥပမာ - a[target]{background-color: yellow;}