CSS တွင် id ကို အသုံးပြုခြင်း

id ကို အသုံးပြုသည့်အခါ၊ ယခင်သင်ခန်းစာများတွင် ကျွန်ုပ်တို့ လေ့လာခဲ့သော selector များနှင့် ပတ်သက်သည့် လုပ်ဆောင်ချက်အားလုံးကို အသုံးပြုနိုင်ပါသည်။

ဥပမာ

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

html<div id="block">
  <h2>ခေါင်းစဉ်</h2>
  <p>စာသား</p>
  <p>စာသား</p>
</div>

id သည် block နှင့် ညီမျှသော အစိတ်အပိုင်းအတွင်းမှ h2 ကို ရွေးချယ်ပြီး ၎င်းကို အနီရောင်အဖြစ် ပြောင်းလဲကြည့်ရအောင်။

css#block h2 {
  color: red;
}

ယခု ၎င်း၏ id သည် block နှင့် ညီမျှသော အစိတ်အပိုင်းအတွင်းမှ p ကို ရွေးချယ်ပြီး ၎င်းကို အစိမ်းရောင်အဖြစ် ပြောင်းလဲကြည့်ရအောင်။

css#block p {
  color: green;
}

ဥပမာ

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

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

id သည် block နှင့် ညီမျှသော အစိတ်အပိုင်းအတွင်းတွင် တည်ရှိသော header class ရှိသည့် အစိတ်အပိုင်းများကို ရွေးချယ်ပြီး ၎င်းတို့ကို အနီရောင်အဖြစ် ပြောင်းလဲကြည့်ရအောင်။

css#block .header {
  color: red;
}

ယခု id သည် block နှင့် ညီမျှသော အစိတ်အပိုင်းအတွင်းတွင် တည်ရှိသော header class ရှိသည့် ခေါင်းစဉ် h2 များကို ရွေးချယ်ပြီး ၎င်းတို့ကို အနီရောင်အဖြစ် ပြောင်းလဲကြည့်ရအောင်။

css#block h2.header {
  color: red;
}

လက်တွေ့လေ့ကျင့်ခန်းများ

Задание 1

id သည် elem နှင့် ညီမျှသော အစိတ်အပိုင်းအတွင်းတွင် တည်ရှိသော h2 အားလုံးကို ရွေးချယ်မည့် selector တစ်ခုကို ရေးပါ။ သင်၏ selector ကို အောက်ပါကုဒ်တွင် စမ်းသပ်ကြည့်ပါ။

html<div id="elem">
  <h2>ရွေးချယ်ပါ</h2>
  <p>---</p>
  
  <h2>ရွေးချယ်ပါ</h2>
  <p>---</p>
</div>

<h2>မရွေးချယ်ပါ +++</h2>
<p>---</p>

Задание 2

id သည် elem နှင့် ညီမျှသော အစိတ်အပိုင်းအတွင်းတွင် တည်ရှိသော text class ရှိသည့် အစိတ်အပိုင်းအားလုံးကို ရွေးချယ်မည့် selector တစ်ခုကို ရေးပါ။ သင်၏ selector ကို အောက်ပါကုဒ်တွင် စမ်းသပ်ကြည့်ပါ။

html<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>

Задание 3

id သည် elem နှင့် ညီမျှသော အစိတ်အပိုင်းအတွင်းတွင် တည်ရှိသော text class ရှိသည့် စာပိုဒ်အားလုံးကို ရွေးချယ်မည့် selector တစ်ခုကို ရေးပါ။ သင်၏ selector ကို အောက်ပါကုဒ်တွင် စမ်းသပ်ကြည့်ပါ။

html<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>

Задание 4

id သည် elem နှင့် ညီမျှသော အစိတ်အပိုင်းအတွင်းတွင် တည်ရှိသော text class ရှိသည့် li အားလုံးကို ရွေးချယ်မည့် selector တစ်ခုကို ရေးပါ။ သင်၏ selector ကို အောက်ပါကုဒ်တွင် စမ်းသပ်ကြည့်ပါ။

html<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>