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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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