CSS ရှိ ဆင်းသက်သူများ selector

ကျွန်ုပ်တို့မှာ ul စာရင်းနှင့် ol စာရင်း ရှိသည်ဆိုပါစို့:

<ul>
	<li>text</li>
	<li>text</li>
	<li>text</li>
	<li>text</li>
	<li>text</li>
</ul>
<ol>
	<li>text</li>
	<li>text</li>
	<li>text</li>
	<li>text</li>
	<li>text</li>
</ol>

ဤစာရင်းများအတွင်းရှိ li tag များကို အနီရောင်အဖြစ် ခြယ်လှယ်ကြပါစို့:

li {
	color: red;
}

ယခု ul စာရင်းအတွင်းရှိ li tag များကို အနီရောင်ခြယ်ရန်၊ ol စာရင်းအတွင်းရှိ li tag များကို အစိမ်းရောင်ခြယ်ရန် လိုအပ်သည်ဆိုပါစို့။

ဤအခြေအနေတွင် ဆင်းသက်သူများ selector က အကူအညီပေးနိုင်သည်။ ၎င်းသည် tag များကို ၎င်းတို့၏မိဘ tag အလိုက် ရွေးချယ်ခွင့်ပြုသည်။ ထိုသို့ပြုလုပ်ရန် မိဘ tag ၏ selector ကိုဖော်ပြပြီး၊ ကြားခံအကွက်လပ်တစ်ခုဖြင့် ဆင်းသက်သူ၏ selector ကိုဖော်ပြရသည်။ ကျွန်ုပ်တို့၏ ကိစ္စတွင် ul li selector သည် ul စာရင်းအတွင်းရှိ li tag အားလုံးကို ရွေးပါမည်။ ထိုနည်းတူ ol li selector သည် ol စာရင်းအတွင်းရှိ li tag အားလုံးကို ရွေးပါမည်။ ၎င်းတို့ကို လိုအပ်သောအရောင်များဖြင့် ခြယ်လှယ်ကြပါစို့:

ul li {
	color: red;
}
ol li {
	color: green;
}

ဆင်းသက်သူများ selector သည် tag selector နှစ်ခုသာဖြင့် ဖွဲ့စည်းထားရမည်ဟူသော ကန့်သတ်ချက်မရှိပါ။ ၎င်းတို့သည် အကွက်လပ်ဖြင့် ခွဲခြားရေးသားထားသော မည်သည့် အရေအတွက်မဆို ရှိနိုင်သည်။ ဥပမာအားဖြင့် အောက်ပါကုဒ်တွင်၊ ul tag အတွင်း၌ တည်ရှိသော li tag အတွင်း၌ တည်ရှိသည့် i tag အားလုံးကို ရွေးချယ်ထားသည်:

ul li i {
	color: red;
}

အောက်ပါကုဒ်ကို ပေးထားသည်:

<ul>
	<li>text <i>italic</i></li>
	<li>text <i>italic</i></li>
	<li>text <i>italic</i></li>
	<li>text <i>italic</i></li>
</ul>

<p>
	paragraph text <i>italic</i>
</p>
<p>
	paragraph text <i>italic</i>
</p>

ul tag များမှ စာစောင်းများကို အနီရောင်ခြယ်ပါ၊ ထို့နောက် p tag များမှ စာစောင်းများကို အစိမ်းရောင်ခြယ်ပါ။

အောက်ပါကုဒ်ကို ပေးထားသည်:

<p>
	paragraph text <b><i>bold italic</i></b>
</p>
<p>
	paragraph text <i>italic</i>
</p>

p tag အတွင်း၌ တည်ရှိသော b tag အတွင်း၌ တည်ရှိသည့် စာစောင်းကို အနီရောင်ခြယ်ပါ။