# Specificity

**CSS Specificity** ဆိုတာဘာလဲဆိုတော့ သတ်မှတ်ထားတဲ့ style rule တွေရှိမယ် ဘယ် rule ကို apply လုပ်သွားမလဲဆိုတာကို ပြောတာပါ ပုံမှန် CSS လေ့လာကြတဲ့အခါ inline နဲ့ တခြား internal, external တွေဆို inline က rule ကို apply လုပ်မယ်၊ တူတာဆိုရင် အောက်ရောက်တဲ့ကောင်ကို apply လုပ်မယ် ဒီလောက်ပဲ လေ့လာဖြစ်ကြတယ် **selector** တွေမှာ **weight** တွေရှိတယ် အဲ့ဒီ weight ကိုနှိုင်းယှဉ်ပြီး အများဆုံး rule ကိုပဲ သုံးသွားတယ် အဲ့တော့ ဘယ်ကောင်က **weight** ဘယ်လောက်ရှိလဲ သိနိုင်မလားပေါ့၊ တွက်ကြည့်လို့ရပါတယ် weight ရှိတဲ့ selector တွေကိုအုပ်စုသတ်မှတ်ကြည့်ရအောင်

1. Inline style = INLINE
2. number of id selector = ID
3. number of classes, pseudo-classes and attribute selectors = CLASS
4. number of element names and pseudo-elements in the selector = TYPE

နံပါတ်စဉ်အတိုင်း 1 က အမြင့်ဆုံး 4 က အနိမ့်ဆုံး

| INLINE |  ID | CLASS | TYPE |
| :----: | :-: | :---: | :--: |
|    1   |  1  |   1   |   1  |

အပေါ်က ဇယားမှာရှိတဲ့အတိုင်း ဂဏန်းနေရာကိုကြည့်ပြီးတော့မှ ထောင်ဂဏန်း၊ ရာဂဏန်း၊ ဆယ်ဂဏန်း၊ ခုဂဏန်း အသီးသီးယူရတယ်

**inline style** သည် ထောင်နေရာမှာရှိလို့ 1000 ယူရတယ်၊ နောက်က column သုံးခုသည် အရေအတွက်ပေါ်မူတည်ပြီး ယူရတယ် ဥပမာ

```CSS
#content #card {
    color:red;
}
```

ဒီမှာဆိုရင် selector ထဲမှာ ID နှစ်ခု ပါလို့ ID အတွက်တန်ဖိုးကို 2 ယူရတယ် ဇယားအတိုင်းထည့်လိုက်ရင် **200** ဖြစ်မယ်

```CSS
a.my-class.another-class[href]:hover {
    color:lightgrey;
}
```

ဒီမှာဆိုရင် a သည် TYPE Column .my-class ရယ် .another-class ရယ် \[href] ရယ် :hover ရယ် သည် CLASS Column တွက်လိုက်ရင် type အတွက် 1 class အတွက် 4

ဇယားအတိုင်းထည့်လိုက်ရင် **41** ရမယ်

**No Weight**  &#x20;

Weight မရှိတဲ့ကောင်တွေကတစ်ဖွဲ့ရှိမယ် Universal selector (\*) Pseudo class ထဲက :where, :has, :not Combinator တွေ +, \~, >, " " &#x20;

နောက်ခု သိထားရမယ့် ဟာတစ်ခုရှိတယ်တစ်ခါတစ်လေမှာ selector weight နည်းနေပေမယ့် အဲ့ဒီထဲကrule ကို apply လုပ်စေချင်တဲ့အခါမှာ !𝗶𝗺𝗽𝗼𝗿𝘁𝗮𝗻𝘁 ဆိုတာကိုထည့်သုံးရလေ့ရှိတယ် &#x20;

example &#x20;

[`#card`](https://www.facebook.com/hashtag/card?__eep__=6&__cft__\[0]=AZW6txPYrr1Gj4kjt9HRUYn_4L-9K_Cx0LZLb7tGRwfvedbOQKmF1ME8nSJoVqbZtvjjWKFiPqJzBwa5W_pZgQVY3kxQwdTDjRFi_4RkEu1eYs32Upg0etKPa-YxvpBvAjk&__tn__=*NK-R) `span { color:red; }`

`.card-body span { color:blue !important; }`

ပထမ selector မှာ weight တန်ဖိုးကID=1 , CLASS=0, TYPE=1total = 101 ရမယ်ဒုတိယ selector မှာ ကျတော့ID=0, CLASS=1, TYPE=1total = 11 ပဲရမယ် &#x20;

ဒါပေမယ့် ဒုတိယ selector ထဲက color rule ကိုပဲ apply လုပ်စေချင်တဲ့ အတွက် !important ထည့်လိုက်တယ်!𝗶𝗺𝗽𝗼𝗿𝘁𝗮𝗻𝘁 သည် table မှာဆိုရင် INLINE ရဲ့ အရှေ့မှာ ရှိမယ် အခုက ထည့်ပြမထားဘူးဒါကြောင့်သူသည် သောင်းဂဏန်းဖြစ်တယ် 10000 လို့သတ်မှတ်တယ် &#x20;

သတိထားရမှာက !important ကို debug လုပ်တဲ့အခါနဲ့ component library တွေရဲ့ style ကို overwrite လုပ်ရတဲ့နေရာမှာပဲ သုံးသင့်တယ်တခြားအကြောင်းအရာတွက် လုံးဝ မသုံးသင့်ပါဘူး ဘာကြောင့်လဲဆိုရင်နေရာတိုင်းမှာ !important တွေပါလာတဲ့အခါ conflict တွေဖြစ်လာမှာပါ

&#x20;&#x20;

ဒီလောက်သိထားမယ်ဆိုရင် Specificity နဲ့ပတ်သတ်ပြီး ပြဿနာတွေကြုံတဲ့အခါ အေးဆေး ဖြေရှင်းတတ်သွားမယ်



References:\
[https://www.w3.org/wiki/Css/Training/Priority\_level\_of\_selector](https://www.w3.org/wiki/Css/Training/Priority_level_of_selector) &#x20;

[https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity](https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity)\
