CSS တွင် id ကို အသုံးပြုခြင်း
id ကို အသုံးပြုသည့်အခါ၊ ယခင်သင်ခန်းစာများတွင်
ကျွန်ုပ်တို့ လေ့လာခဲ့သော selector များနှင့် ပတ်သက်သည့်
လုပ်ဆောင်ချက်အားလုံးကို အသုံးပြုနိုင်ပါသည်။
ဥပမာ
အောက်ပါကုဒ်သည် ကျွန်ုပ်တို့တွင် ရှိသည်ဆိုပါစို့။
<div id="block">
<h2>ခေါင်းစဉ်</h2>
<p>စာသား</p>
<p>စာသား</p>
</div>
id သည် block နှင့် ညီမျှသော အစိတ်အပိုင်းအတွင်းမှ
h2 ကို ရွေးချယ်ပြီး ၎င်းကို အနီရောင်အဖြစ်
ပြောင်းလဲကြည့်ရအောင်။
#block h2 {
color: red;
}
ယခု ၎င်း၏ id သည် block နှင့် ညီမျှသော
အစိတ်အပိုင်းအတွင်းမှ p ကို ရွေးချယ်ပြီး ၎င်းကို အစိမ်းရောင်အဖြစ်
ပြောင်းလဲကြည့်ရအောင်။
#block p {
color: green;
}
ဥပမာ
ယခု အောက်ပါကုဒ်သည် ကျွန်ုပ်တို့တွင် ရှိသည်ဆိုပါစို့။
<div id="block">
<h2 class="header">ခေါင်းစဉ်</h2>
<p>စာသား</p>
<p>စာသား</p>
<h3 class="header">ခေါင်းစဉ်</h3>
<p>စာသား</p>
<p>စာသား</p>
</div>
id သည် block နှင့် ညီမျှသော အစိတ်အပိုင်းအတွင်းတွင်
တည်ရှိသော header class ရှိသည့် အစိတ်အပိုင်းများကို
ရွေးချယ်ပြီး ၎င်းတို့ကို အနီရောင်အဖြစ် ပြောင်းလဲကြည့်ရအောင်။
#block .header {
color: red;
}
ယခု id သည် block နှင့် ညီမျှသော အစိတ်အပိုင်းအတွင်းတွင်
တည်ရှိသော header class ရှိသည့် ခေါင်းစဉ် h2 များကို
ရွေးချယ်ပြီး ၎င်းတို့ကို အနီရောင်အဖြစ် ပြောင်းလဲကြည့်ရအောင်။
#block h2.header {
color: red;
}
လက်တွေ့လေ့ကျင့်ခန်းများ
id သည် elem နှင့် ညီမျှသော အစိတ်အပိုင်းအတွင်းတွင်
တည်ရှိသော h2 အားလုံးကို ရွေးချယ်မည့် selector တစ်ခုကို
ရေးပါ။ သင်၏ selector ကို အောက်ပါကုဒ်တွင် စမ်းသပ်ကြည့်ပါ။
<div id="elem">
<h2>ရွေးချယ်ပါ</h2>
<p>---</p>
<h2>ရွေးချယ်ပါ</h2>
<p>---</p>
</div>
<h2>မရွေးချယ်ပါ +++</h2>
<p>---</p>
id သည် elem နှင့် ညီမျှသော အစိတ်အပိုင်းအတွင်းတွင်
တည်ရှိသော text class ရှိသည့် အစိတ်အပိုင်းအားလုံးကို
ရွေးချယ်မည့် selector တစ်ခုကို ရေးပါ။ သင်၏ selector ကို
အောက်ပါကုဒ်တွင် စမ်းသပ်ကြည့်ပါ။
<div id="elem">
<p class="text">+++</p>
<p class="text">+++</p>
<ul>
<li class="text">+++</li>
<li class="text">+++</li>
<li class="text">+++</li>
<li>---</li>
<li>---</li>
</ul>
</div>
<p class="text">---</p>
id သည် elem နှင့် ညီမျှသော အစိတ်အပိုင်းအတွင်းတွင်
တည်ရှိသော text class ရှိသည့် စာပိုဒ်အားလုံးကို
ရွေးချယ်မည့် selector တစ်ခုကို ရေးပါ။ သင်၏ selector ကို
အောက်ပါကုဒ်တွင် စမ်းသပ်ကြည့်ပါ။
<div id="elem">
<p class="text">+++</p>
<p class="text">+++</p>
<ul>
<li class="text">---</li>
<li class="text">---</li>
<li class="text">---</li>
<li>---</li>
<li>---</li>
</ul>
</div>
<p class="text">---</p>
id သည် elem နှင့် ညီမျှသော အစိတ်အပိုင်းအတွင်းတွင်
တည်ရှိသော text class ရှိသည့် li အားလုံးကို
ရွေးချယ်မည့် selector တစ်ခုကို ရေးပါ။ သင်၏ selector ကို
အောက်ပါကုဒ်တွင် စမ်းသပ်ကြည့်ပါ။
<div id="elem">
<p class="text">---</p>
<p class="text">---</p>
<ul>
<li class="text">+++</li>
<li class="text">+++</li>
<li class="text">+++</li>
<li>---</li>
<li>---</li>
</ul>
</div>
<p class="text">---</p>
