ความแตกต่างระหว่าง Selector . (Class) และ # (ID) ใน CSS

'.' Selector (Class Selector)

'.' (dot) เป็น class selector ใช้สร้างคลาสสไตล์ที่นำไปใช้กับ หลาย element ได้

'#' Selector (ID Selector)

'#' (hash) เป็น ID selector ใช้จัดสไตล์ element เดียวที่มี id ตรงกัน (ID ต้องไม่ซ้ำในหน้าเว็บ)

ตัวอย่างเปรียบเทียบ

<!DOCTYPE html> <html> <head>    <title>Selector Example</title>    <style>       .blackBorder {          border: 2px solid black;       }       #redDiv {          border: 2px solid red;       }    </style> </head> <body>    <div> No Border Box </div>    <div class="blackBorder"> Black Border Box </div>    <div id="redDiv"> Red Border Box </div>    <div> No Border Box </div>    <div class="blackBorder"> Black Border Box </div> </body> </html>

คำอธิบาย

ในตัวอย่าง:

• .blackBorder ใช้กับ div 2 ตัว (ตัวที่ 2 และ 5) - ใช้ซ้ำได้
• #redDiv ใช้กับ div ตัวที่ 3 เท่านั้น - ใช้ได้ครั้งเดียวต่อหน้า
• div ตัวที่ 1 และ 4 ไม่มี class/id จึงไม่มีขอบ

ความแตกต่างสำคัญ:

Specificity Hierarchy:

Inline style (1,0,0,0) > ID (0,1,0,0) > Class/Attr/Pseudo-class (0,0,1,0) > Element/Pseudo-element (0,0,0,1)

แนวทางปฏิบัติที่ดี:

• ใช้ **Class** สำหรับ styling ทั่วไป (maintainable, reusable)
• ใช้ **ID** เฉพาะ: JavaScript hooks, anchor links, form labels (for attribute)
• หลีกเลี่ยง ID สำหรับ styling (specificity สูงเกินไป ยาก override)
• ใช้ naming convention เช่น BEM: .block__element--modifier