✅ Practice + Quiz · Lesson 38
Specificity and Cascade
Specificity और Cascade
The Cascade — where CSS gets its name
The "C" in CSS stands for Cascading — and this chapter finally explains what that means. When multiple rules target the same element with conflicting values (one says
color: red, another color: blue), the browser needs to decide which one WINS. The cascade is the set of rules that decides. Three things determine the winner, in order: importance (!important), specificity (how targeted the selector is), and source order (later rules beat earlier ones). Understanding this ends the mystery of "why isn't my CSS working?" — the answer is almost always the cascade.What Specificity Is
p { color: blue; } /* targets ALL paragraphs */
.intro { color: green; } /* targets .intro class - MORE specific */
#main { color: red; } /* targets #main id - MOST specific */
/* A paragraph with class="intro" id="main" will be RED */Specificity is how the browser measures how "targeted" a selector is — a more specific selector beats a less specific one, regardless of order. The intuition: a rule that points to one exact element (by id) should override a rule that paints all elements of a type. So when two rules conflict, the browser counts each selector's specificity and the higher one wins. This is why sometimes your new rule "doesn't work" — an existing, MORE specific rule is overriding it. It's not the order that's failing you; it's specificity.
The Specificity Hierarchy — from weakest to strongest
| Selector type | Specificity | Strength |
|---|---|---|
| Element (p, div, h1) | Low | Weakest |
| Class (.box), attribute, pseudo-class (:hover) | Medium | Beats elements |
| ID (#header) | High | Beats classes |
| Inline style (style="...") | Very High | Beats IDs |
| !important | Highest | Beats everything |
The ranking from weakest to strongest: element selectors (
p) are weakest; classes (.intro), attributes, and pseudo-classes are stronger and beat elements; IDs (#main) are stronger still and beat classes; inline styles (style="" in the HTML) beat IDs; and !important overrides everything. Recall the id vs class idea from HTML — id being unique/specific mirrors its high specificity here. A single id rule will override many class rules. This hierarchy is the key to predicting which style wins.Calculating Specificity — the three columns
Think of specificity as three counts: (IDs, Classes, Elements)
p → (0, 0, 1) one element
.intro → (0, 1, 0) one class
p.intro → (0, 1, 1) one class + one element
#main → (1, 0, 0) one id → beats all the above
#main .intro p → (1, 1, 1) id + class + elementTo compare two selectors, count the IDs, then classes, then elements — like comparing three-digit numbers. Compare the ID count first; if tied, compare classes; if still tied, compare elements. A selector with even one ID
(1,0,0) beats one with ten classes (0,10,0) — because the ID column is checked first and always wins. If two selectors have EXACTLY equal specificity, THEN source order decides (the later rule wins — which is why link states need LoVe-HAte order). You don't need to calculate this constantly, but understanding it explains every "why did this style win?" puzzle.!important and Debugging — use with caution
.box {
color: red !important; /* forces this to win, overriding specificity */
}!important is the nuclear option — it overrides ALL specificity rules and forces a value to win. It's tempting when a style won't apply, but it's considered bad practice to overuse: it breaks the natural cascade, and then you need ANOTHER !important to override IT, leading to messy "!important wars." Better debugging approach: when CSS "isn't working," open DevTools, inspect the element, and look at the Styles panel — it shows every rule affecting the element and STRIKES THROUGH the ones that lost. This instantly reveals what's overriding your style (usually a more specific selector). Fix the specificity properly rather than reaching for !important. Reserve !important for genuine edge cases, not everyday conflicts.Exam Corner
Q: What three things decide which CSS rule wins? Importance (!important), specificity, then source order.
Q: Order selectors by specificity: class, element, id. element (weakest) < class < id (strongest).
Q: Does an id selector beat several class selectors? Yes — one id beats any number of classes.
Q: When does source order decide the winner? When two selectors have exactly equal specificity (later rule wins).
Q: Why avoid overusing !important? It breaks the cascade and leads to escalating override wars; fix specificity instead.
Q: Order selectors by specificity: class, element, id. element (weakest) < class < id (strongest).
Q: Does an id selector beat several class selectors? Yes — one id beats any number of classes.
Q: When does source order decide the winner? When two selectors have exactly equal specificity (later rule wins).
Q: Why avoid overusing !important? It breaks the cascade and leads to escalating override wars; fix specificity instead.
The Cascade — जहां से CSS को नाम मिलता है
CSS का "C" Cascading है — और यह chapter आखिरकार समझाता है इसका मतलब क्या है. जब कई rules एक ही element को टकराती values से target करें (एक कहे
color: red, दूसरी color: blue), browser को तय करना होता है कौन JEETE. Cascade वे rules हैं जो तय करते हैं. तीन चीज़ें winner तय करती हैं, order में: importance (!important), specificity (selector कितना targeted है), और source order (बाद के rules पहले वालों को हराते). इसे समझना "मेरी CSS काम क्यों नहीं कर रही?" का रहस्य खत्म करता है — जवाब लगभग हमेशा cascade है.Specificity क्या है
p { color: blue; } /* SAARE paragraphs target */
.intro { color: green; } /* .intro class target - JYADA specific */
#main { color: red; } /* #main id target - SABSE specific */
/* class="intro" id="main" wala paragraph RED hoga */Specificity यह है कि browser कैसे मापता है selector कितना "targeted" है — ज़्यादा specific selector कम specific को हराता है, order की परवाह किए बिना. Intuition: वह rule जो एक exact element (id से) point करे उसे एक type के सारे elements रंगने वाले rule को override करना चाहिए. तो जब दो rules टकराएं, browser हर selector की specificity गिनता है और ज़्यादा वाला जीतता है. इसीलिए कभी आपका नया rule "काम नहीं करता" — एक मौजूदा, ZYADA specific rule उसे override कर रहा है. Order fail नहीं कर रहा; specificity है.
Specificity Hierarchy — कमज़ोर से मज़बूत
| Selector type | Specificity | ताकत |
|---|---|---|
| Element (p, div, h1) | Low | सबसे कमज़ोर |
| Class (.box), attribute, pseudo-class (:hover) | Medium | Elements को हराता |
| ID (#header) | High | Classes को हराता |
| Inline style (style="...") | Very High | IDs को हराता |
| !important | Highest | सबको हराता |
कमज़ोर से मज़बूत ranking: element selectors (
p) सबसे कमज़ोर; classes (.intro), attributes, और pseudo-classes ज़्यादा मज़बूत और elements को हराते; IDs (#main) और भी मज़बूत और classes को हराते; inline styles (HTML में style="") IDs को हराते; और !important सब कुछ override करता. HTML से id vs class विचार याद कीजिए — id unique/specific होना यहां उसकी high specificity दर्शाता है. एक id rule कई class rules override करेगा. यह hierarchy कौन-सी style जीते predict करने की चाबी है.Specificity गिनना — तीन columns
Specificity ko teen counts samjho: (IDs, Classes, Elements)
p → (0, 0, 1) ek element
.intro → (0, 1, 0) ek class
p.intro → (0, 1, 1) ek class + ek element
#main → (1, 0, 0) ek id → upar sabko harata
#main .intro p → (1, 1, 1) id + class + elementदो selectors compare करने को, IDs गिनिए, फिर classes, फिर elements — तीन-अंकीय numbers compare करने जैसा. पहले ID count compare कीजिए; बराबर हो तो classes; फिर भी बराबर तो elements. एक ID वाला selector
(1,0,0) दस classes वाले (0,10,0) को हराता है — क्योंकि ID column पहले check होता है और हमेशा जीतता है. अगर दो selectors की BILKUL बराबर specificity हो, TAB source order तय करता है (बाद का rule जीतता — इसीलिए link states को LoVe-HAte order चाहिए). इसे लगातार calculate करने की ज़रूरत नहीं, पर समझना हर "यह style क्यों जीती?" पहेली समझाता है.!important और Debugging — सावधानी से
.box {
color: red !important; /* ise jeetne ko force, specificity override */
}!important nuclear option है — यह SAARE specificity rules override करके value को जीतने पर मजबूर करता है. जब style न लगे तब लुभावना, पर इसका ज़्यादा इस्तेमाल bad practice माना जाता है: यह natural cascade तोड़ता है, और फिर उसे override करने को DUSRA !important चाहिए, गंदे "!important wars" की ओर ले जाते. बेहतर debugging approach: जब CSS "काम न करे," DevTools खोलिए, element inspect कीजिए, और Styles panel देखिए — यह element को प्रभावित करने वाला हर rule दिखाता है और हारे हुओं पर STRIKE-THROUGH करता है. यह तुरंत बताता है क्या आपकी style override कर रहा है (आमतौर पर ज़्यादा specific selector). !important के बजाय specificity ठीक से fix कीजिए. !important को असली edge cases के लिए रखिए, रोज़ के conflicts के लिए नहीं.Exam Corner
Q: कौन-सी तीन चीज़ें तय करती हैं कौन-सा CSS rule जीते? Importance (!important), specificity, फिर source order.
Q: Specificity से order कीजिए: class, element, id. element (कमज़ोर) < class < id (मज़बूत).
Q: क्या एक id selector कई class selectors को हराता है? हां — एक id किसी भी संख्या में classes को हराता है.
Q: Source order कब winner तय करता है? जब दो selectors की बिल्कुल बराबर specificity हो (बाद का rule जीतता).
Q: !important का ज़्यादा इस्तेमाल क्यों टालें? यह cascade तोड़ता है और बढ़ते override wars की ओर ले जाता है; बजाय specificity fix कीजिए.
Q: Specificity से order कीजिए: class, element, id. element (कमज़ोर) < class < id (मज़बूत).
Q: क्या एक id selector कई class selectors को हराता है? हां — एक id किसी भी संख्या में classes को हराता है.
Q: Source order कब winner तय करता है? जब दो selectors की बिल्कुल बराबर specificity हो (बाद का rule जीतता).
Q: !important का ज़्यादा इस्तेमाल क्यों टालें? यह cascade तोड़ता है और बढ़ते override wars की ओर ले जाता है; बजाय specificity fix कीजिए.
💻 Live Code Editor
इस पेज का code यहाँ तैयार है — बदलिए और तुरंत नतीजा देखिए. कुछ install किए बिना.
सब कुछ आपके browser में ही चलता है — कोई server, कोई signup नहीं. JavaScript का
console.log देखने के लिए F12 दबाइए.