CSS specificity کا حساب کتاب کیسے کیا جاتا ہے؟

Question

Accepted Answer

جب متعدد rules ایک ہی element کو target کریں، تو **specificity** فیصلہ کرتی ہے کہ کون سی rule جیتے گی۔ یہ selector کے حصوں سے شمار کی جانے والی ایک score ہے، جو 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)
```

بائیں سے دائیں موازنہ کریں؛ پہلا column جو مختلف ہو، فاتح کا فیصلہ کرتا ہے۔

```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 */
```

## اہم rules

- ایک واحد **id** کسی بھی تعداد میں **classes** سے بہتر ہے؛ ایک واحد class کسی بھی تعداد میں elements سے بہتر ہے۔ (آپ کم tiers کو "جمع" نہیں کر سکتے تاکہ اعلیٰ tier کو شکست دیں۔)
- اگر specificity **برابر** ہو، تو وہ rule جو source میں **بعد میں** ظاہر ہو، جیتتا ہے (source order)۔
- **`!important`** عام specificity کو مکمل طور پر override کرتا ہے — یہ آخری حربہ ہے جس کو override کرنا مشکل ہے (آپ کو ایک اور `!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 تنازعہ ہے — کوئی اور جگہ سے زیادہ specific rule جیت رہا ہے۔

Selectors کو low اور flat رکھنا (single classes کو ترجیح دیں، ids اور `!important` سے بچیں) specificity کو predictable رکھتا ہے، تاکہ styles آسانی سے override اور maintain رہیں۔