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 သုံးခုသည် အရေအတွက်ပေါ်မူတည်ပြီး ယူရတယ် ဥပမာ

#content #card {
    color:red;
}

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

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

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

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

example

#card 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 ပဲရမယ်

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

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

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

References: https://www.w3.org/wiki/Css/Training/Priority_level_of_selector

https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity

NextBackground

Last updated