Understanding Style Precedence in CSS

Developer နဲ႔ Designer အခ်ိဳ႕ဟာ css ကိုသံုးေနေပမယ့္ css style တစ္ခု တစ္ခုကို ဘယ္လိုနည္းနဲ႔တြက္ခ်က္ျပီး overwrite လုပ္ၾကတယ္ဆိုတဲ႔အခ်က္ကို ေသခ်ာမသိၾကပါဘူး။တကယ္က ကြ်န္ေတာ္လည္း အခုလိုက္ဖတ္ျပီးမွ ပိုသိသြားတာပါ။ အေျခခံအားျဖင့္ေတာ႔ သိျပီးသားပါ။

ဒါေၾကာင့္ ပို အေသးစိတ္ေရးခ်င္လို႔ လိုက္ဖတ္ျပီး blog post တင္ေပးလိုက္ပါတယ္။
CSS ကို Html page ထဲကို apply လုပ္ႏိုင္တဲ႔ ပံုစံ ၃ မ်ိဳးရွိတာကို လူတိုင္းသိျပီးၾကမွာပါ။
1. External Style Sheet
external က style.css file တစ္ခုကို ထားျပီး html page ကေခၚယူအသံုးျပဳတာျဖစ္ပါတယ္။အဲဒီ style.css ထဲမွာ css style ေတြေရးထားပါတယ္။

2. Internal Style Sheet
Internal Style ကေတာ႔ သံုးမယ့္ Html page မွာပဲ အေပၚပိုင္း <head> tag ထဲမွာ <style> tag သံုးျပီးေရးတဲ႔နည္းျဖစ္ပါတယ္။

3. Inline Style
Inline style ကေတာ႔ ကိုယ္ style လုပ္ခ်င္တဲ႔ tag မွာ style attribute သံုးျပီးေရးသားတဲ႔နည္းပါ။စမ္းတဲ႔အခါက လြဲလို႔ တကယ္႔လုပ္ငန္းခြင္ထဲမွာ မသံုးေစခ်င္ပါဘူး။

မွတ္သားရန္ (၁)
internal style ထဲက style ေတြက external style sheet ထဲက style ထက္ပိုဦးစားေပးခံရပါတယ္။
inline style ေတြကေတာ႔ internal style ထက္ ပိုဦးစားေပးခံရပါတယ္။

css precedence ကိုနားမလည္တဲ႔ သူေတြကေတာ႔ အလြယ္ဆံုးနည္းသံဳးျပီး မရရင္ inline style သံုးလုိက္တာမ်ားပါတယ္။ဒါကိုေရွာင္လြႊဲႏိုင္ေအာင္ css precedence တြက္နည္းကို ဖတ္ရႈမွတ္သားပါ။

CSS မွာ ဘယ္ဟာကို ဘယ္ဟာထက္ပို ဦးစားေပးျပီး အသံုးျပဳတယ္ဆိုတာကို အျမင္႔ဆံုးကေန အနိမ္႔ဆံုး အစဥ္လိုက္ေဖာ္ျပပါမယ္။
မွတ္သားရန္ (၂)
1. inline style (highest)
2. id selector
3. class selector
4. attribute selector
5. element selector
6. * selector
7. inherited styles

တြက္ခ်က္တဲ႔အခါ အျမင့္ဆံုး selector ကို ပိုဦးစားေပးသံုးပါတယ္။ inline style ကေတာ႔ အထက္မွာရွင္းျပထားတဲ႔အတုိင္း style attribute ထဲမွာေရးထာျဖစ္ပါတယ္။ သံုးမယ့္ tag မွာ direct ေရးတာျဖစ္တဲ႔အတြက္ selector မလိုအပ္ပါဘူး။

<p style="color:red">this is inline style</p>

id selector ဆိုတာကေတာ႔ tag မွာပါတဲ႔ id attribute နာမည္ကို သံုးျပီး style ေပးတာျဖစ္ပါတယ္။
<p id='my_id_selector'>This is id selector</p>
in style.css

#my_id_selector{
      color:red
}

class selector ဆိုတာလည္း tag တစ္ခုရဲ႕ class attribute မွာေပးထားတဲ႔နာမည္နဲ႔ style ေပးတာျဖစ္ပါတယ္။
<p class='my_class_selector'>This is id selector</p>
in style.css

.my_class_selector{
      color:red
}

attribute selector ဆိုတာက tag မွာပါတဲ႔ attribute နာမည္နဲ႔ သူ႔ value ကိုသံုးျပီး style ေပးတာျဖစ္ပါတယ္
<input type="text" name="email" value="" />
in style.css

[type=email]{
    color:red
}

* selector ကေတာ႔ ဘယ္ tag မဆိုလို႔ အဓိပၸါယ္ရပါတယ္
in style.css

*{
    color:red
}

inherited style ဆိုတာကေတာ႔ tag တစ္ခု မွာေပးထားတဲ႔ style ဟာ သူ႔ေအာက္က child tags ေတြဆီကို လည္း သက္ေရာက္မႈရွိေနတာကိုဆိုလိုတာပါ။ အဲလို style မ်ိဳးကေတာ႔ အလြယ္တကူ overwrite လုပ္လို႔ရႏိုင္ပါတယ္။ overwrite မလုပ္ထားဘူးဆိုရင္ေတာ႔ inherited style ေတြကဆက္လက္သက္ေရာက္ေနမွာျဖစ္ပါတယ္။

<div id="wrapper">
        <p class="black_text">This should be black color</p>
</div>

in style.css

#wrapper{ color:blue }
.black_text{ color:black }

.black_text သံုးျပီး အနက္ေရာင္ မေျပာင္းေပးခဲ႔ဘူးဆိုရင္ p tag ဟာ အထက္က div ၇ဲ႕ style အတိုင္း သက္ေရာက္မႈကို ရရွိျပီး အျပာေရာင္ text ျဖစ္ေနမွာပါ။
အဲဒီမွာေရာႏိုင္တာက အထက္က example မွာ တစ္ခုက class selector တစ္ခုက id selector ဒါေပမယ့္ class selector ၇ဲ႕ style က ဘာလို႔ id selector ကို overwrite လဲလို႕စဥ္းစားစရာပါ။ဒါေပမယ့္ အေတြးမမွားပါနဲ႔ မေပၚမွာရွင္းျပခဲ႔တဲ႔ ဦးစားေပး စာရင္းဆိုတာက tag တစ္ခုတည္းေပၚမွာပဲဆုိလိုပါတယ္။
eg :

<p class="warning" id="delete_process">this is one tage</p>

Combine selector ဆိုတာကေတာ႔ id selector, class selector, attribute selector, element selector, * တို႔ကို ေပါင္းျပီး တည္ေဆာက္ရတဲ႔ selector မ်ားျဖစ္ပါတယ္။အသံုးမ်ားပါတယ္။
eg:

div .file .download #image{
        width: 100px;
        height: 50px;
}

အဲဒီမွာ လည္း ျပႆနာက combine selector ေတြထဲမွာ ဘယ္ဟာကို ဘယ္ဟာ ပိုဦးစားေပးလဲဆိုတာကိုလည္း ျပန္စဥ္းစားရဦးမွာပါ။ combine selector ကအသံုးအမ်ားဆံုးပါ။
ပံုမွန္အားျဖင့္ more specific ျဖစ္တဲ႔ဟာကို ပိုဦးစားေပးပါတယ္။ပိုတိက်စြာ ညႊန္ေပးထားတဲ႔ selector ကို ပိုဦးစားေပးတာကိုေျပာတာပါ။ combine selector ရဲ႕ ဦးစားေပးတြက္နည္းကို သိသြားရင္ မွတ္သား၇န္ ၂ ကအလိုလို အက်ံဳးစ၀င္သြားပါလိမ္႔မယ္။

eg:

div .file #image{
     width: 200px;   
      height: 150px;
}

div .file .download #image{
        width: 100px;
        height: 50px;
}

အဲဒီ selector ႏွစ္ခုမွာ ေအာက္ဘက္က selector က ပိုတိက်စြာ ညြန္းေပးထားတဲ႔အတြက္ သူ႔ကိုဦးစားေပးပါတယ္။
ဒီထက္ပိုတိတိက်က် တြက္ခ်က္တဲ႔နည္းေလးကိုေဖာ္ျပေပးပါဦးမယ္။
မွတ္သားရန္ (၃)

Selector Type	position	increase value
Element, Pseudo Element	c	1
Class, Pseudo class, Attribute	b	1
Id	a	1

(a,b,c) လို႔သတ္မွတ္ထားျပီးေတာ႔ အထက္က element တစ္ခုကို combine selector ထဲမွာေတြ႔တိုင္း သက္ဆိုင္ရာေနရာမွာ 1 တိုးေပးရမွာျဖစ္ပါတယ္။

eg:

p: 1 element – (0,0,1) #one element selector
div.content : 1 element , 1 class– (0,1,1) #one element selector and one class selector
#sidebar: 1 id – (1,0,0) # one id selector
div#sidebar: 1 element, 1 id – (1,0,1) # one element selector and one id selector
div#sidebar p: 2 elements, 1 id – (1,0,2) # two element selector and one id selector
div#sidebar p.bio: 2 elements, 1 class, 1 id – (1,1,2) # two element selector , one class selector and one id selector

အဲဒီလိုတြက္ခ်က္ရာမွာ a ေနရာကတန္ဖိုးကို အရင္ဆံုး ႏိႈင္းယွဥ္ မယ္ ။ တူေနရင္ b ေနရာကတန္ဖိုးကို ႏိုင္းယွဥ္မယ္။ တူေနေသးရင္ c ေနရာကတန္ဖိုးကို ႏိႈင္းယွဥ္ပါတယ္။ ေနာက္ဆံုး d ေနရာကတန္ဖိုးကိုႏိႈင္ယွဥ္ပါတယ္။

ဒါေၾကာင့္ (1,0,0) နဲ႔ (0,0,15) နဲ႔ဆိုရင္ (1,0,0)ကို ပိုဦးစားေပးမွာပါ။

မွတ္သားရန္ (၄)

ေနာက္ဆံုး abcd အားလံုးတူေနတယ္ဆိုရင္ေတာ႔ ေနာက္မွေရးတဲ႔ selector ကို ပိုဦးစားေပးသြားပါလိမ္႔မယ္။

မွတ္သားရန္ (၅)
အထက္က ဦးစားေပးေတြကို ဘယ္လိုပဲတြက္ခ်က္တြက္ခ်က္ !important ကိုသံုးလိုက္ရင္ ေတာ႔ သူကဥိီးစားေပးအခံရဆံုး style ျဖစ္လာပါတယ္။
eg

div{
    color:blue !important;
}

div#text_block{
    color:black;
}

အထက္ကဥပမာ မွာ id selector ကို ဦးစားေပးထားေပမယ့္ element selector မွာ !important သံုးထားတဲ႔အတြက္ေၾကာင့္ text ဟာ အျပာေရာင္ျဖစ္ေနမွာပါ။ !important ကိုသံုးမယ္ဆိုရင္ inline style ကိုေတာင္ overwrite လုပ္ႏိုင္ပါတယ္။

reference:
http://vanseodesign.com/css/css-specificity-inheritance-cascaade/
http://tutorials.jenkov.com/css/precedence.html