CSS specificity คำนวณได้อย่างไร?

Question

Accepted Answer

เมื่อมีหลายกฎที่กำหนดเป้าหมายองค์ประกอบเดียวกัน **specificity** จะตัดสินว่ากฎใดชนะ มันคือคะแนนที่คำนวณจากส่วนของ selector โดยเปรียบเทียบเป็น tuple `(ids, classes, elements)`

```text
Inline style   → 1,0,0,0  (highest, short of !important)
ID             → 0,1,0,0
Class / attr / pseudo-class → 0,0,1,0
Element / pseudo-element    → 0,0,0,1
Universal (*)  → 0,0,0,0  (no weight)
```

เปรียบเทียบจากซ้ายไปขวา คอลัมน์แรกที่แตกต่างจะตัดสินผู้ชนะ

```css
#nav .item a   { color: red; }   /* 1 id, 1 class, 1 element → 1,1,1 */
.menu .item a  { color: blue; }  /* 0 id, 2 classes, 1 element → 0,2,1 */
/* red wins — having ONE id beats any number of classes */
```

## กฎหลัก

- **id** เพียงตัวเดียวจะเอาชนะ **classes** จำนวนเท่าใดก็ตาม class เดียวจะเอาชนะ elements จำนวนเท่าใดก็ตาม (คุณไม่สามารถ "บวก" ระดับที่ต่ำกว่าเพื่อเอาชนะระดับที่สูงกว่า)
- หากระดับ specificity **เท่ากัน** กฎที่ปรากฏ **ภายหลัง** ในโค้ดต้นฉบับจะชนะ (ลำดับโค้ดต้นฉบับ)
- **`!important`** แทนที่ specificity ตามปกติโดยสิ้นเชิง — ทางเลือกสุดท้ายที่ยากต่อการแทนที่ (คุณจะต้องใช้ `!important` อื่นที่มี specificity สูงกว่า)

```css
.btn { color: blue !important; } /* ⚠️ wins over almost everything — avoid */
```

## คำแนะนำเชิงปฏิบัติ

```css
/* ❌ over-specific, hard to override later */
#sidebar ul li.active a { }
/* ✅ keep it flat — one class -> easy to manage */
.nav-link--active { }
```

## เหตุใดจึงสำคัญ

ความหงุดหงิดส่วนใหญ่เกี่ยวกับ "ทำไม CSS ของฉันไม่ใช้งาน?" เกิดจากความขัดแย้งด้าน specificity — กฎที่เจาะจงมากขึ้นในที่อื่นนั้นชนะ

การให้ selector ที่ระดับต่ำและแบบเรียบ (ให้ความสำคัญกับ classes เดียว หลีกเลี่ยง ids และ `!important`) ทำให้ specificity สามารถคาดเดาได้ สไตล์จึงยังคงง่ายต่อการแทนที่และการรักษา