การเลือกองค์ประกอบด้วย id ที่ไม่ซ้ำใน CSS

อย่างที่คุณทราบแล้ว คลาสมีวัตถุประสงค์เพื่อกำหนดให้กับกลุ่มขององค์ประกอบ นอกจากคลาสแล้ว เรายังสามารถเลือกองค์ประกอบด้วย id ได้อีกด้วย ซึ่งหมายถึงตัวระบุที่ไม่ซ้ำขององค์ัพประกอบ ความหมายของไม่ซ้ำคือ หากในหน้าของเรามีองค์ประกอบที่มี id นั้นอยู่แล้ว จะไม่ควรมีองค์ประกอบอื่นที่มี id เดียวกันอีก

ตัวระบุที่ไม่ซ้ำถูกกำหนดโดยใช้แอตทริบิวต์ id ซึ่งภายในจะเขียนชื่อที่เราคิดขึ้นมา ตัวอย่างเช่น ลองสร้างบล็อกสองอัน อันแรกกำหนด id เป็นค่า block1 และอันที่สองเป็นค่า block2:

<div id="block1">
	<p>text</p>
	<p>text</p>
</div>
<div id="block2">
	<p>text</p>
	<p>text</p>
</div>

เพื่อที่จะอ้างอิงถึงองค์ประกอบที่มี id ที่กำหนดไว้ ต้องเขียนสัญลักษณ์ # และชื่อที่เราคิดขึ้นมา ดังนี้:

#block1 {
	color: red;
}
#block2 {
	color: green;
}

แอตทริบิวต์ id ถูกใช้ในกรณีที่ต้องการเน้นความไม่ซ้ำขององค์ัพณะ คลาสถูกใช้เมื่อคาดว่าอาจจะมีองค์ประกอบลักษณะดังกล่าวหลายอัน แม้ว่าตอนนี้จะมีเพียงอันเดียว

มีโค้ดดังต่อไปนี้:

<div id="elem1">
	<h2>Title</h2>
	<p>
		text
	</p>
	<p>
		text
	</p>
</div>
<div id="elem2">
	<h2>Title</h2>
	<p>
		text
	</p>
	<p>
		text
	</p>
</div>
<div id="elem3">
	<h2>Title</h2>
	<p>
		text
	</p>
	<p>
		text
	</p>
</div>

จงกำหนดสีให้เนื้อหาภายในบล็อก elem1 เป็นสีแดง บล็อก elem2 เป็นสีเขียว และบล็อก elem3 เป็นสีฟ้า