CSS တွင် ခက်ခဲသော အနွယ်နှင့် class ရွေးချယ်မှု ပေါင်းစပ်များ

ယခု ကျွန်ုပ်တို့တွင် အောက်ပါကုဒ်ရှိသည်ဟု ဆိုကြပါစို့။

<div class="block">
	<h2 class="header">ခေါင်းစဉ် h2</h2>
	<p>
		စာသား
	</p>
	
	<h3 class="header">ခေါင်းစဉ် h3</h3>
	<p>
		စာသား
	</p>
	<p>
		စာသား
	</p>
</div>
<div class="block">
	<h2 class="header">ခေါင်းစဉ် h2</h2>
	<p>
		စာသား
	</p>
	
	<h3 class="header">ခေါင်းစဉ် h3</h3>
	<p>
		စာသား
	</p>
	<p>
		စာသား
	</p>
</div>

block class ရှိသော element အတွင်းတွင်ရှိသည့် header class ရှိသော element အားလုံးကို ရှာဖွေပြီး Arial ဖောင့်ကို သတ်မှတ်ပေးကြပါစို့။

.block .header {
	font-family: Arial;
}

HTML ကုဒ်တွင်မြင်ရသည့်အတိုင်း block class ရှိသော element အတွင်းတွင် header class ရှိသော element များသည် h2 ခေါင်းစဉ်များ သို့မဟုတ် h3 ခေါင်းစဉ်များ ဖြစ်နိုင်ပါသည်။ ထိုခေါင်းစဉ်များကို ခွဲခြားသိရှိနိုင်သော selector များကို ရေးပြီး ထိုခေါင်းစဉ်များတွင် တစ်ခုခုလုပ်ဆောင်ကြည့်ကြပါစို့။

block class ရှိသော element အတွင်းတွင်ရှိသော header class ပါသည့် h2 element အားလုံးကို ရွေးချယ်ကြပါစို့။

.block h2.header {
	font-size: 30px;
	color: red;
}

ယခု block class ရှိသော element အတွင်းတွင်ရှိသော header class ပါသည့် h3 element အားလုံးကို ရွေးချယ်ကြပါစို့။

.block h3.header {
	font-size: 20px;
	color: green;
}

ကျွန်ုပ်တို့၏ CSS အားလုံးကို အတူတကွစုစည်းကြပါစို့။

.block .header {
	font-family: Arial;
}
.block h2.header {
	font-size: 30px;
	color: red;
}
.block h3.header {
	font-size: 20px;
	color: green;
}

၎င်းကို ကျွန်ုပ်တို့၏ HTML ကုဒ်သို့ သုံးကြည့်ပါမည်။

အောက်တွင်ပေးထားသောကုဒ်ရှိ selector သည် မည်သည်ကို ရွေးချယ်သည်ကို ရှင်းပြပါ။ ထို့နောက် ထို selector နှင့် ကိုက်ညီသော HTML ကုဒ်ကို ရေးပါ။ Selector ပါသောကုဒ်မှာ အောက်ပါအတိုင်းဖြစ်သည်။

.eee .bbb {
	color: red;
}

.eee h2 {
	color: red;
}

.eee h2.bbb {
	color: red;
}

.eee h3.bbb {
	color: red;
}

.eee p.bbb {
	color: red;
}

.eee .bbb .kkk {
	color: red;
}