कास्केड आणि इनहेरिटन्स कोणते स्टाइल लागू होतात हे कसे ठरवतात?

Question

Accepted Answer

जेव्हा अनेक नियम घटकाला शैली देऊ शकतात, तेव्हा दोन यंत्रणा निकाल ठरवतात: **कास्केड** (कोणता नियम जिंकतो) आणि **इनहेरिटन्स** (कोणते गुणधर्म माता-पितांकडून खाली येतात).

## कास्केड — प्राधान्य क्रमानुसार, संघर्ष सोडवणे

ब्राउজर प्राधान्य क्रमानुसार तपास करून विजयी घोषणा निवडतो:

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

## इनहेरिटन्स — काही गुणधर्म मुलांपर्यंत जातात

विशिष्ट गुणधर्म (बहुतेक **मजकूर-संबंधित**) वंशजांद्वारे आपोआप विरासत मिळतात; बहुतेक नाहीत.

```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`.

## इनहेरिटन्स स्पष्टपणे नियंत्रित करणे

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

## कास्केडमध्ये विशिष्टता पुनरावृत्ती

हे कारण आहे की कमी-विशिष्टता नियम नंतर लिहिला गेला तरीही हार मानू शकतो — विशिष्टता स्रोत क्रमापूर्वी तपास केली जाते. क्रम समजून घेणे (महत्व → विशिष्टता → स्रोत क्रम) जवळजवळ प्रत्येक "माझी शैली लागू होत नाही" केस समजावून देते.

## हे महत्वाचे का आहे

कास्केड आणि इनहेरिटन्स *CSS वास्तविकपणे कसे सोडवते* याचे मूल मॉडेल आहे.

प्राधान्य क्रम जाणून घेणे संघर्ष डिबग करते, कोणते गुणधर्म विरासत मिळतात हे जाणून घेणे आपल्याला `color`/`font` एकदा `body` वर सेट करू देते सर्वत्र ऐवजी, आणि `inherit`/`initial`/`unset` सटीक नियंत्रण देतात — एकत्रितपणे ते CSS ला जादूकरीपणे ऐवजी अनुमानयोग्य बनवतात.