cascade اور inheritance کیسے فیصلہ کرتے ہیں کہ کون سے styles لاگو ہوں؟

Question

Accepted Answer

جب کسی element کو style دینے کے لیے کئی rules ہو سکتے ہوں، تو دو mechanisms نتیجہ کا فیصلہ کرتے ہیں: **cascade** (کون سا rule جیتا ہے) اور **inheritance** (کون سی properties والدین سے بچوں کو منتقل ہوتی ہیں)۔

## Cascade — تنازعات کو ترتیب کے ساتھ حل کرنا

براؤزر winning declaration کو اس ترتیب میں چیک کر کے منتخب کرتا ہے:

```text
1. Importance   → !important beats normal declarations
2. Specificity  → more specific selector wins (ids > classes > elements)
3. Source order → if still tied, the LAST rule defined wins
```

```css
p { color: blue; }          /* specificity 0,0,1 */
.text { color: green; }     /* specificity 0,1,0 → wins over the element rule */
p { color: red; }           /* same specificity as first, but LATER → would beat blue */
/* result for <p class="text">: green (class beats element) */
```

## Inheritance — کچھ properties بچوں تک منتقل ہوتی ہیں

کچھ properties (بیشتر **text سے متعلق**) خودبخود descendants کے ذریعے وراثت میں ملتی ہیں؛ زیادہ تر ایسا نہیں ہوتا۔

```css
body {
  color: #333;        /* ✅ inherited — all text descendants get it */
  font-family: serif; /* ✅ inherited */
  border: 1px solid;  /* ❌ NOT inherited — children don't get a border */
}
```

**وراثت میں ملنے والی**: `color`, `font-*`, `line-height`, `text-align`, `visibility`, `cursor`۔ **وراثت میں نہ ملنے والی**: `border`, `margin`, `padding`, `background`, `width`, `height`, `display`۔

## Inheritance کو واضح طور پر کنٹرول کرنا

```css
.child {
  color: inherit;  /* force-take the parent's value */
  border: initial; /* reset to the property's default */
  all: unset;      /* reset everything: inherit if inheritable, else initial */
}
```

## Cascade میں Specificity کا خلاصہ

یہی وجہ ہے کہ ایک کم-specificity rule ہار سکتا ہے چاہے یہ بعد میں لکھا گیا ہو — specificity کو source order سے *پہلے* چیک کیا جاتا ہے۔ ترتیب کو سمجھنا (importance → specificity → source order) تقریباً ہر "میرا style لاگو نہیں ہو رہا" کے معاملے کی وضاحت کرتا ہے۔

## یہ کیوں اہم ہے

Cascade اور inheritance *CSS کے حقیقی طریقے کار* کا بنیادی ماڈل ہیں۔

Precedence order کو جاننا تنازعات کو debug کرتا ہے، یہ جاننا کہ کون سی properties وراثت میں ملتی ہیں آپ کو `color`/`font` کو ہر جگہ سیٹ کرنے کی بجائے `body` پر ایک بار سیٹ کرنے دیتا ہے، اور `inherit`/`initial`/`unset` آپ کو عین کنٹرول دیتے ہیں — یہ سب مل کر CSS کو magical کی بجائے قابلِ پیش گوئی بناتے ہیں۔