CSS selector များကို ပေါင်းစပ်အသုံးပြုခြင်း လက်တွေ့လေ့ကျင့်ခန်း

Задание 1

div များအတွင်းတွင်ရှိသော စာပိုဒ်p များကို ရွေးချယ်မည့် selector တစ်ခုကိုရေးပါ။ သင်၏ selector ကို အောက်ပါကုဒ်တွင် စစ်ဆေးပါ။

html<div>
  <p>
    +++
  </p>
  <p>
    +++
  </p>
</div>
<div>
  <p>
    +++
  </p>
</div>

<p>
  ---
</p>
<p>
  ---
</p>

Задание 2

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

html<div>
  <h2>+++</h2>
  <p>
    ---
  </p>
  <p>
    ---
  </p>
</div>
<div>
  <h2>+++</h2>
  <p>
    ---
  </p>
</div>

<h2>---</h2>
<p>
  ---
</p>

Задание 3

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

html<div id="block">
  <h2>---</h2>
  <p>
    +++
  </p>
  <p>
    +++
  </p>
</div>
<div>
  <h2>---</h2>
  <p>
    ---
  </p>
</div>

<h2>---</h2>
<p>
  ---
</p>

Задание 4

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

html<div id="block">
  <h2>+++</h2>
  <p>
    ---
  </p>
  <p>
    ---
  </p>
  
  <h2>+++</h2>
  <p>
    ---
  </p>
</div>
<div>
  <h2>---</h2>
  <p>
    ---
  </p>
</div>

<h2>---</h2>
<p>
  ---
</p>

Задание 5

bbb class ရှိသော element အားလုံးကို ရွေးချယ်မည့် selector တစ်ခုကိုရေးပါ။ သင်၏ selector ကို အောက်ပါကုဒ်တွင် စစ်ဆေးပါ။

html<div id="block">
  <h2 class="bbb">+++</h2>
  <p class="bbb">
    +++
  </p>
  <p>
    ---
  </p>
  
  <h2 class="bbb">+++</h2>
  <p>
    ---
  </p>
</div>
<div class="bbb">
  +++
</div>

<h2>---</h2>
<p class="bbb">
  +++
</p>

Задание 6

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

html<div id="block">
  <h2 class="bbb">+++</h2>
  <p class="bbb">
    +++
  </p>
  <p>
    ---
  </p>
  
  <h2 class="bbb">+++</h2>
  <p>
    ---
  </p>
</div>
<div class="bbb">
  ---
</div>

<h2>---</h2>
<p class="bbb">
  ---
</p>

Задание 7

bbb class ရှိသော p စာပိုဒ်အားလုံးကို ရွေးချယ်မည့် selector တစ်ခုကိုရေးပါ။ သင်၏ selector ကို အောက်ပါကုဒ်တွင် စစ်ဆေးပါ။

html<div id="block">
  <h2 class="bbb">---</h2>
  <p class="bbb">
    +++
  </p>
  <p>
    ---
  </p>
  
  <h2 class="bbb">---</h2>
  <p class="bbb">
    +++
  </p>
</div>
<div class="bbb">
  ---
</div>

<h2>---</h2>
<p class="bbb">
  +++
</p>

Задание 8

bbb class ရှိသော h2 ခေါင်းစဉ်အားလုံးကို ရွေးချယ်မည့် selector တစ်ခုကိုရေးပါ။ သင်၏ selector ကို အောက်ပါကုဒ်တွင် စစ်ဆေးပါ။

html<div id="block">
  <h2 class="bbb">+++</h2>
  <p class="bbb">
    ---
  </p>
  <p>
    ---
  </p>
  
  <h2 class="bbb">+++</h2>
  <p class="bbb">
    ---
  </p>
</div>

<h2>---</h2>
<p class="bbb">
  ---
</p>

<h2 class="bbb">+++</h2>
<p class="bbb">
  ---
</p>

Задание 9

id တန်ဖိုး block နှင့် ညီသော element အတွင်းမှ bbb class ရှိသော p စာပိုဒ်အားလုံးကို ရွေးချယ်မည့် selector တစ်ခုကိုရေးပါ။ သင်၏ selector ကို အောက်ပါကုဒ်တွင် စစ်ဆေးပါ။

html<div id="block">
  <h2 class="bbb">---</h2>
  <p class="bbb">
    +++
  </p>
  <p>
    ---
  </p>
  
  <h2 class="bbb">---</h2>
  <p class="bbb">
    +++
  </p>
</div>
<div class="bbb">
  ---
</div>

<h2>---</h2>
<p class="bbb">
  ---
</p>

Задание 10

bbb class ရှိသော element များနှင့် xxx class ရှိသော element များအားလုံးကို တစ်ပြိုင်နက် ရွေးချယ်မည့် selector တစ်ခုကိုရေးပါ (ဆိုလိုသည်မှာ selector များကို ကော်မာဖြင့်ခွဲ၍ အုပ်စုဖွဲ့ရန် လိုအပ်ပါသည်)။ သင်၏ selector ကို အောက်ပါကုဒ်တွင် စစ်ဆေးပါ။

html<h2 class="bbb">+++</h2>
<p class="bbb">
  +++
</p>

<h2 class="xxx">+++</h2>
<p>
  ---
</p>

<h2>---</h2>
<p class="xxx">
  +++
</p>

<div class="bbb">
  +++
</div>

Задание 11

bbb class ရှိသော p စာပိုဒ်အားလုံးနှင့် တစ်ပြိုင်နက် xxx class ရှိသော h2 ခေါင်းစဉ်အားလုံးကို ရွေးချယ်မည့် selector တစ်ခုကိုရေးပါ။ သင်၏ selector ကို အောက်ပါကုဒ်တွင် စစ်ဆေးပါ။

html<h2 class="bbb">---</h2>
<p class="bbb">
  +++
</p>

<h2 class="xxx">+++</h2>
<p>
  ---
</p>

<h2>---</h2>
<p class="xxx">
  ---
</p>

<div class="bbb">
  ---
</div>

Задание 12

id တန်ဖိုး block နှင့် ညီသော element အတွင်းမှ bbb class ရှိသော p စာပိုဒ်အားလုံးနှင့် တစ်ပြိုင်နက် id တန်ဖိုး block နှင့် ညီသော element အတွင်းမှ xxx class ရှိသော p စာပိုဒ်အားလုံးကို ရွေးချယ်မည့် selector တစ်ခုကိုရေးပါ။ သင်၏ selector ကို အောက်ပါကုဒ်တွင် စစ်ဆေးပါ။

html<div id="block">
  <h2 class="bbb">---</h2>
  <p class="bbb">
    +++
  </p>
  
  <h2 class="xxx">---</h2>
  <p>
    ---
  </p>
  
  <h2>---</h2>
  <p class="xxx">
    +++
  </p>
  
  <div class="bbb">
    ---
  </div>
  <div class="xxx">
    ---
  </div>
</div>

<h2 class="bbb">---</h2>
<p class="xxx">
  ---
</p>

Задание 13

fff class ရှိသော element အားလုံးကို ရွေးချယ်မည့် selector တစ်ခုကိုရေးပါ။ သင်၏ selector ကို အောက်ပါကုဒ်တွင် စစ်ဆေးပါ။

html<div class="fff">
  +++
</div>

<h2 class="fff">+++</h2>
<p class="fff">
  +++
</p>

<h2 class="bbb">---</h2>
<p class="xxx">
  ---
</p>

Задание 14

fff class ရှိသော element အတွင်းမှ p စာပိုဒ်အားလုံးကို ရွေးချယ်မည့် selector တစ်ခုကိုရေးပါ။ သင်၏ selector ကို အောက်ပါကုဒ်တွင် စစ်ဆေးပါ။

html<div class="fff">
  <h2>---</h2>
  <p>
    +++
  </p>
  <p>
    +++
  </p>
</div>

<h2 class="fff">---</h2>
<p class="fff">
  ---
</p>

Задание 15

fff class ရှိသော p စာပိုဒ်အားလုံးကို ရွေးချယ်မည့် selector တစ်ခုကိုရေးပါ။ သင်၏ selector ကို အောက်ပါကုဒ်တွင် စစ်ဆေးပါ။

html<div id="block">
  <h2>---</h2>
  <p>
    ---
  </p>
  <p>
    ---
  </p>
  <p class="fff">
    +++
  </p>
</div>

<h2 class="fff">---</h2>
<p class="fff">
  +++
</p>

Задание 16

fff class ရှိသော element အတွင်းမှ bbb class ရှိသော element အားလုံးကို ရွေးချယ်မည့် selector တစ်ခုကိုရေးပါ။ သင်၏ selector ကို အောက်ပါကုဒ်တွင် စစ်ဆေးပါ။

html<div class="fff">
  <h2 class="bbb">+++</h2>
  <p>
    ---
  </p>
  <p>
    ---
  </p>
  <p class="bbb">
    +++
  </p>
</div>

<h2 class="fff">---</h2>
<p class="bbb">
  ---
</p>

Задание 17

fff class ရှိသော element အတွင်းမှ bbb class ရှိသော h2 ခေါင်းစဉ်အားလုံးကို ရွေးချယ်မည့် selector တစ်ခုကိုရေးပါ။ သင်၏ selector ကို အောက်ပါကုဒ်တွင် စစ်ဆေးပါ။

html<div class="fff">
  <h2 class="bbb">+++</h2>
  <p>
    ---
  </p>
  
  <h2 class="bbb">+++</h2>
  <p>
    ---
  </p>
  <p class="bbb">
    ---
  </p>
</div>

<h2 class="bbb">---</h2>
<p class="bbb">
  ---
</p>
<p class="fff">
  ---
</p>