วิธีการเลือกใช้ ID กับ Class ใน css

[M008]

ปัญหาอย่างหนึ่งสำหรับผู้ที่เพิ่งหัดเขียน css ใหม่ก็คือ ไม่รู้ว่าเมื่อไหร่ควรจะเลือกใช้ ID และเมื่อไหร่ถึงสมควรจะเลือกใช้ Class
ก่อนอื่นเราต้องมาดูกันว่า ID และ Class แตกต่างกันอย่างไร
1.วิธีเขียนที่แตกต่างกัน
การเขียน ID ใน CSS จะเริ่มต้นด้วยสัญญลักษณ์ # แล้วตามด้วยชื่อ ID ที่เราต้องการตั้ง เช่น
#main_header
#main_menu
#sub_menu
#footer

การเขียน Class ใน CSS จะเริ่มต้นด้วยสัญญลักษณ์ . แล้วตามด้วยชื่อ Class ที่เราต้องการตั้ง เช่น
.sub_header
.main_list
.content
.details

2.จำนวนครั้งที่ใช้ได้ต่อหน้าเว็บ
ID ที่ตั้งขึ้นมาจะอนุญาตให้ใช้ได้ครั้งเดียวในหน้า และหนึ่งแท็กจะใส่ ID ได้ตัวเดียว ส่วน Class ที่ตั้งขึ้นมาจะอนุญาตให้ใช้ได้หลายครั้งในหน้าเดียวกัน และหนึ่งแท็กจะใส่ Class ได้หลายตัว

เราควรเลือกใช้ ID หรือ Class ในกรณีใดบ้าง
เราควรเลือกใช้ ID เมื่อเราต้องการระบุถึงส่วนสำคัญของหน้าที่ในหน้าหนึ่งๆจะมีแค่หนึ่งเดียวเท่านั้น เช่น ส่วนหัวด้านบนของหน้า, ส่วนเมนูหลักของหน้า, ส่วนเนื้อหาของหน้า หรือส่วนท้ายสุดที่ประกอบในหน้า หรือเลือกใช้ ID ในส่วนที่เราต้องการใส่ JavaScript หรือ jQuery เพื่อเพิ่มลูกเล่นและความสวยงามให้กับหน้า

เราควรเลือกใช้ Class เมื่อเราต้องการใส่สไตล์การแสดงผลที่เป็นรายละเอียดปลีกย่อยที่เราอยากใช้ร่วมกันได้กับหลายๆแท็กในหน้าเดียวกัน เช่น สีตัวอักษรของพาดหัวหลักพาดหัวรอง, ลักษณะของลิ้งก์เพื่อไปอ่านต่อหน้าใน