Basics
Cascade & Specificity
Kaunsa Rule Jeetta Hai
💡 Agar do log same cheez ke baare mein alag advice de rahe hain, kiski baat maanoge? Specificity ek "authority ranking" hai — ID (boss ka order) > class (manager ka order) > element (general guideline) — jyada specific selector, jeetega.
"Cascading" ka matlab hai jab multiple CSS rules SAME element ko target karte hain, browser decide karta hai kaunsa jeetega — specificity (kitna specific selector hai) aur order (baad wala rule pehle wale ko override karta hai, agar specificity same ho) dono factors hain.
Specificity hierarchy (weakest se strongest): element selectors (p, div) < class selectors (.name) < ID selectors (#name) < inline styles (style="...") < !important (nuclear option, avoid karo generally).
p { color: blue; } /* specificity: 1 (element) */
.text { color: green; } /* specificity: 10 (class) */
#main { color: red; } /* specificity: 100 (ID) */
/* <p class="text" id="main">Text</p>
Result: RED (ID sabse specific hai, jeet gaya) */⚖️
Agar do log same cheez ke baare mein alag advice de rahe hain, kiski baat maanoge? Specificity ek "authority ranking" hai — ID (boss ka order) > class (manager ka order) > element (general guideline) — jyada specific selector, jeetega.
1 / 2
⚡ Quick Recap
- Specificity: element < class < ID < inline < !important
- Same specificity par, baad wala rule jeetta hai
- !important almost hamesha avoid karo — maintainability nightmare
Is page mein (1 subtopics)
Kuch CSS properties automatically parent se child mein "inherit" hoti hain (jaise color, font-family), kuch nahi (jaise border, padding, margin). inherit keyword se manually force bhi kar sakte ho.
body {
color: #333; /* inherit hoga saare children mein */
font-family: Arial; /* ye bhi inherit hoga */
border: 1px solid; /* ye INHERIT NAHI hoga */
}
.child {
border: inherit; /* manually force inherit karna */
}Tip: Rule of thumb: text-related properties (color, font, line-height) usually inherit hoti hain, box-related properties (border, margin, padding, width) nahi — logical hai, kyunki har box ki apni size honi chahiye.