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 **बराबर** है, तो नियम जो बाद में दिखाई देता है **जीतता है** (source order)।
- **`!important`** सामान्य specificity को पूरी तरह से override कर देता है — एक अंतिम उपाय जिसे override करना कठिन है (आपको उच्च specificity के साथ एक अन्य `!important` की आवश्यकता होगी)।

```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 conflict है — अधिक विशिष्ट नियम कहीं और जीत रहा है।

Selectors को कम और समतल रखना (एकल classes पर ध्यान दें, ids और `!important` से बचें) specificity को पूर्वानुमानित रखता है, ताकि styles को override और maintain करना आसान रहे।