CSS Specificity Hierarchy

Compound Selector Specificity जुड़ती है

div.card.featured जैसा एक compound selector एक element, और दो classes combine करता है, और इसकी specificity हर हिस्से का योग है: एक element point plus दो class points। Developers अक्सर underestimate कर देते हैं कि selectors को chain करने पर specificity कितनी जल्दी बढ़ जाती है।

उदाहरण: Compound Selector Specificity Adds Up

<style>
div.card { color: black; }
div.card.featured { color: gold; }
</style>
<div class="card featured">Two classes plus an element: highest specificity wins</div>

:where() Zero-Specificity Trick

:where() pseudo-class एक selector list को wrap करता है लेकिन खुद की कोई specificity contribute नहीं करता, :is() के उलट जो अपने सबसे ज़्यादा specificity वाले argument की specificity लेता है। यह :where() को default/reset styles लिखने के लिए उपयोगी बनाता है जिन्हें किसी भी दूसरे rule से override करना बेहद आसान हो।

उदाहरण: The :where() Zero-Specificity Trick

<style>
:where(.reset) p { color: black; }
.card p { color: blue; }
</style>
<div class="reset card"><p>Trivially overridden by any other rule</p></div>

Attribute और Pseudo-Class Selectors Classes की तरह Count होते हैं

[type="text"] जैसे attribute selectors और :hover या :nth-child() जैसे pseudo-classes सभी एक regular class selector जितने ही specificity level पर count होते हैं, हर एक एक point। जब एक :hover rule unexpectedly बराबर weight वाले किसी class-based rule को override करने में fail हो जाए तो यह भूलना आसान है।

उदाहरण: Attribute and Pseudo-Class Selectors Count as Classes

<style>
.field { border-color: gray; }
[type="text"] { border-color: blue; }
</style>
<input type="text" class="field">

DevTools में Specificity Conflicts Debug करना

Browser DevTools किसी selected element के लिए हर matching CSS rule दिखाता है, किसी भी ऐसी declaration पर strikethrough के साथ जो higher-specificity या बाद वाले rule से हार गई। इस panel को ऊपर से नीचे तक पढ़ना यह diagnose करने का सबसे तेज़ real-world तरीका है कि कोई style क्यों लागू नहीं हो रहा, अंदाज़ा लगाने के बजाय।

उदाहरण: Debugging Specificity Conflicts in DevTools

<style>
p { color: black; }
.text { color: green; }
</style>
<p class="text">DevTools shows the losing rule with a strikethrough</p>

Inline Styles और !important का Interaction

एक inline style attribute आमतौर पर specificity चाहे जो भी हो किसी stylesheet के हर selector से ऊपर रैंक करता है, क्योंकि इसे specificity (1,0,0,0) की तरह treat किया जाता है।

लेकिन, किसी stylesheet rule पर !important inline styles से भी ऊपर रैंक करता है, जिससे !important पूरे specificity system में genuinely सबसे highest-priority override बन जाता है।

उदाहरण: Inline Styles and !important Interaction

<style>
p { color: green !important; }
</style>
<p style="color: orange;">!important outranks even this inline style</p>