การใช้งาน id ใน CSS

เมื่อใช้ id ทำงานได้ทั้งหมด การจัดการกับตัวเลือกที่เราได้ศึกษา ในบทเรียนก่อนหน้า

ตัวอย่าง

สมมติว่าเรามีโค้ดต่อไปนี้:

<div id="block">
	<h2>Title</h2>
	<p>text</p>
	<p>text</p>
</div>

มาเลือก h2 จากองค์ประกอบที่มี id เท่ากับ block และตั้งค่าสีให้เป็นสีแดง กัน:

#block h2 {
	color: red;
}

และตอนนี้มาเลือก p จากองค์ประกอบที่มี id เท่ากับ block และตั้งค่าสี ให้เป็นสีเขียวกัน:

#block p {
	color: green;
}

ตัวอย่าง

ตอนนี้สมมติว่าเรามีโค้ดต่อไปนี้:

<div id="block">
	<h2 class="header">Title</h2>
	<p>text</p>
	<p>text</p>
	
	<h3 class="header">Title</h3>
	<p>text</p>
	<p>text</p>
</div>

มาเลือกองค์ประกอบที่มีคลาส header ที่อยู่ภายในองค์ประกอบที่มี id เท่ากับ block และตั้งค่าสีให้เป็นสีแดง กัน:

#block .header {
	color: red;
}

และตอนนี้มาเลือกหัวข้อ h2 ที่มีคลาส header ที่อยู่ภายในองค์ประกอบ ที่มี id เท่ากับ block และตั้งค่าสี ให้เป็นสีแดงกัน:

#block h2.header {
	color: red;
}

โจทย์ฝึกปฏิบัติ

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

<div id="elem">
	<h2>Choose</h2>
	<p>---</p>
	
	<h2>Choose</h2>
	<p>---</p>
</div>

<h2>Do not +++</h2>
<p>---</p>

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

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

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

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

เขียนตัวเลือกที่จะเลือก li ทั้งหมด ที่มีคลาส text ที่อยู่ในองค์ประกอบ ที่มี id เท่ากับ elem ตรวจสอบ ตัวเลือกของคุณด้วยโค้ดต่อไปนี้:

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