CSS โซ่เลือก id

ตัวเลือก id

ตัวเลือก id สามารถกำหนดรูปแบบเฉพาะสำหรับองค์ประกอบ HTML ที่มี id ที่กำหนด

ตัวเลือก id ถูกกำหนดด้วย "#"

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

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

ในรหัส HTML ที่กำหนดด้านล่างนี้ องค์ประกอบ p ที่มีคุณสมบัติ id ว่า red จะแสดงในสีแดง และองค์ประกอบ p ที่มีคุณสมบัติ id ว่า green จะแสดงในสีเขียว

<p id="red">บทบาทนี้เป็นสีแดง。</p>
<p id="green">บทบาทนี้เป็นสีเขียว。</p>

แจ้งเตือน：คุณสมบัติ id สามารถปรากฏได้เพียงครั้งเดียวในแต่ละเอกสาร HTML โปรดดูเหตุผล XHTML: การปรับสร้างเว็บไซต์.

ตัวเลือก id และตัวเลือกย่อย

ในการจัดละแวกเว็บไซต์ปัจจุบัน ตัวเลือก id มักถูกใช้เพื่อสร้างตัวเลือกย่อย

#sidebar p {
	font-style: italic;
	text-align: right;
	margin-top: 0.5em;
	}

รูปแบบที่กำหนดข้างต้นจะถูกใช้กับเนื้อหาที่ปรากฏในองค์ประกอบที่มี id ว่า sidebar โดยที่องค์ประกอบนี้อาจเป็น div หรือ cell ของตาราง หรืออาจเป็นองค์ประกอบรุ่นแบบอื่น ๆ หรือองค์ประกอบรุ่นแบบ block หรือแม้กระทั่งองค์ประกอบรุ่นแบบ inline อย่างเช่น <em></em> หรือ <span></span> แต่การใช้งานนี้นั้นผิดกฎ เพราะไม่สามารถใส่ <p> ไว้ในองค์ประกอบ inline อย่าง <span> ได้ (ถ้าคุณลืมเหตุผล โปรดดู XHTML: การปรับสร้างเว็บไซต์）。

ตัวเลือกหนึ่ง ใช้งานหลายรูปแบบ

แม้ว่าองค์ประกอบที่มี id ว่า sidebar จะสามารถปรากฏในเอกสารได้เพียงครั้งเดียว แต่ id ในตัวเลือกนี้ก็สามารถถูกใช้งานหลายครั้งเพื่อเป็นตัวเลือกย่อย:

#sidebar p {
	font-style: italic;
	text-align: right;
	margin-top: 0.5em;
	}
#sidebar h2 {
	font-size: 1em;
	font-weight: normal;
	font-style: italic;
	margin: 0;
	line-height: 1.5;
	text-align: right;
	}

ในนี้ องค์ประกอบ p ใน sidebar ได้รับการจัดการพิเศษต่างจากองค์ประกอบ p อื่นในหน้า และองค์ประกอบ h2 ใน sidebar ได้รับการจัดการพิเศษต่างจากองค์ประกอบ h2 อื่นในหน้า

โซ่เลือกเดี่ยว

โซ่เลือก id แม้จะไม่ถูกใช้เพื่อสร้างโซ่เลือกทางยื่นยัน มันยังสามารถทำงานด้วยตัวเอง:

#sidebar {
	border: 1px dotted #000;
	padding: 10px;
	}

ตามกฎนี้ องค์ประกอบที่มี id ว่า sidebar จะมีขอบเขตดำจุดกว้างหนึ่งพิกเซล และมีเขตช่องว่างภายในกว้าง 10 พิกเซล (padding) โดยอาจมีการละเลยกฎนี้โดยบราวเซอร์ Windows/IE รุ่นเก่า หากคุณไม่ได้กำหนดองค์ประกอบที่มีโซ่เลือกนี้ตั้งแต่เอง:

div#sidebar {
	border: 1px dotted #000;
	padding: 10px;
	}

เนื้อหาที่เกี่ยวข้อง

หากคุณต้องการเรียนรู้เพิ่มเติมเกี่ยวกับโซ่เลือก id โปรดอ่านอบรมระดับสูงของ CodeW3C.com:CSS โซ่เลือก id ละเอียด.