ฝึกฝนการผสมซีเล็กเตอร์ CSS

Задание 1

เขียนซีเล็กเตอร์ที่เลือกพารากราฟ ที่อยู่ภายใน div div ตรวจสอบ ซีเล็กเตอร์ของคุณกับโค้ดต่อไปนี้:

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

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

Задание 2

เขียนซีเล็กเตอร์ที่เลือก h2 ทั้งหมด ที่อยู่ภายใน div div ตรวจสอบ ซีเล็กเตอร์ของคุณกับโค้ดต่อไปนี้:

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

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

Задание 3

เขียนซีเล็กเตอร์ที่เลือกพารากราฟทั้งหมด p จากองค์ประกอบที่มี id เท่ากับ block ตรวจสอบซีเล็กเตอร์ของคุณกับ โค้ดต่อไปนี้:

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

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

Задание 4

เขียนซีเล็กเตอร์ที่เลือก h2 ทั้งหมด จากองค์ประกอบที่มี id เท่ากับ block ตรวจสอบซีเล็กเตอร์ของคุณกับโค้ดต่อไปนี้:

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 ตรวจสอบซีเล็กเตอร์ของคุณ กับโค้ดต่อไปนี้:

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

เขียนซีเล็กเตอร์ที่เลือกองค์ประกอบทั้งหมด ที่มีคลาส bbb จากองค์ประกอบที่มี id เท่ากับ block ตรวจสอบซีเล็กเตอร์ของคุณ กับโค้ดต่อไปนี้:

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

เขียนซีเล็กเตอร์ที่เลือกพารากราฟทั้งหมด p ที่มีคลาส bbb ตรวจสอบ ซีเล็กเตอร์ของคุณกับโค้ดต่อไปนี้:

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

เขียนซีเล็กเตอร์ที่เลือก h2 ทั้งหมด ที่มีคลาส bbb ตรวจสอบซีเล็กเตอร์ของคุณ กับโค้ดต่อไปนี้:

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

เขียนซีเล็กเตอร์ที่เลือกพารากราฟทั้งหมด p ที่มีคลาส bbb จากองค์ประกอบ ที่มี id เท่ากับ block ตรวจสอบ ซีเล็กเตอร์ของคุณกับโค้ดต่อไปนี้:

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 และองค์ประกอบที่มีคลาส xxx พร้อมกัน (คือต้องจัดกลุ่ม ซีเล็กเตอร์ด้วยเครื่องหมายจุลภาค) ตรวจสอบซีเล็กเตอร์ของคุณ กับโค้ดต่อไปนี้:

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

เขียนซีเล็กเตอร์ที่เลือกพารากราฟทั้งหมด p ที่มีคลาส bbb และพร้อมกัน h2 ทั้งหมดที่มีคลาส xxx ตรวจสอบ ซีเล็กเตอร์ของคุณกับโค้ดต่อไปนี้:

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

เขียนซีเล็กเตอร์ที่เลือกพารากราฟทั้งหมด p ที่มีคลาส bbb จากองค์ประกอบ ที่มี id เท่ากับ block และพร้อมกัน พารากราฟทั้งหมด p ที่มีคลาส xxx จากองค์ประกอบที่มี id เท่ากับ block ตรวจสอบซีเล็กเตอร์ของคุณกับโค้ดต่อไปนี้:

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 ตรวจสอบซีเล็กเตอร์ของคุณ กับโค้ดต่อไปนี้:

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

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

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

Задание 14

เขียนซีเล็กเตอร์ที่เลือกพารากราฟทั้งหมด p จากองค์ประกอบที่มีคลาส fff ตรวจสอบซีเล็กเตอร์ของคุณกับ โค้ดต่อไปนี้:

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

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

Задание 15

เขียนซีเล็กเตอร์ที่เลือกพารากราฟทั้งหมด p ที่มีคลาส fff ตรวจสอบ ซีเล็กเตอร์ของคุณกับโค้ดต่อไปนี้:

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

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

Задание 16

เขียนซีเล็กเตอร์ที่เลือกองค์ประกอบทั้งหมด ที่มีคลาส bbb จากองค์ประกอบที่มีคลาส fff ตรวจสอบซีเล็กเตอร์ของคุณกับโค้ดต่อไปนี้:

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

เขียนซีเล็กเตอร์ที่เลือก h2 ทั้งหมด ที่มีคลาส bbb จากองค์ประกอบที่มีคลาส fff ตรวจสอบซีเล็กเตอร์ของคุณกับโค้ดต่อไปนี้:

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>