CSS တွင် ခြွင်းချက်စည်းမျဉ်းများ

ယခင်ဥပမာတွင် selector နှစ်ခုစလုံးသည်တူညီပြီးတူညီသောအဦးအစဉ်အနေအထားရှိခဲ့သည်။ ဆိုလိုသည်မှာေအာက်ေပးထားသော property ကသာအနိုင်ရမည်ဖြစ်သည်။

စာမျက်နှာရှိ element တစ်ခုသည် selector အမျိုးမျိုးနှင့် ကိုက်ညီသည့်အခြေအနေများလည်းရှိပါသည်။ ထိုသို့ေသာအခါ property များတိုက်ဆိုင်ပါက ပို၍ခြွင်းချက်ကြီးသော၊ ဆိုလိုသည်မှာ ပို၍တိကျသော selector ကအနိုင်ရပါမည်။ ခြွင်းချက်စည်းမျဉ်းများကို ကြည့်ရအောင်။

ပထမစည်းမျဉ်း

class သည်အမြဲတမ်း tag selector ကို အနိုင်ရသည်။

<p class="text">text</p>

p {
	color: red;
}
.text {
	color: green; /* ဤအရောင်ကို အသုံးပြုမည် */
}

ဒုတိယစည်းမျဉ်း

ID သည်အမြဲတမ်း class ကို အနိုင်ရသည်။

<p id="elem" class="text">text</p>

.text {
	color: red;
}
#elem {
	color: green; /* ဤအရောင်ကို အသုံးပြုမည် */
}

တတိယစည်းမျဉ်း

တူညီသောအခြေအနေများတွင် အစိတ်အပိုင်းများစွာပါသည့် selector ကအနိုင်ရသည်။ ဥပမာ tag selector နှစ်ခုရှိပါက tag များစွာပါသည့် selector ကအနိုင်ရမည်။

<div>
	<p>text</p>
</div>

p {
	color: red;
}
div p {
	color: green; /* ဤအရောင်ကို အသုံးပြုမည် */
}

class နှစ်ခုရှိပါက class များစွာအသုံးပြုထားသည့် selector ကအနိုင်ရမည် (အကယ်၍ tag selector များပါဝင်နေပါက ၎င်းတို့သည်အကျိုးသက်ရောက်မှုမရှိပါ)။

<div class="block">
	<p class="text">text</p>
</div>

.text {
	color: red;
}
.block .text {
	color: green; /* ဤအရောင်ကို အသုံးပြုမည် */
}