CSS Specificity

अपनी website पर एक button को style करने की कल्पना करें। आप एक rule लिखते हैं जो सभी buttons को red बताती है, लेकिन फिर आप एक और rule लिखते हैं जो blue-btn class वाले buttons को blue बताती है। Browser को यह तय करना पड़ता है कि कौन-सा rule जीतता है। CSS Specificity वह scoring system है जिसे browser इस conflict को resolve करने के लिए इस्तेमाल करता है। यह हर CSS selector के लिए एक score calculate करता है कि वह कितना specific है। सबसे ज़्यादा score वाला selector conflict जीतता है, और उसकी style element पर लागू होती है।

In this page:

Specificity Score Calculation
Element बनाम Class Specificity
Class बनाम ID Specificity
Inline Styles Override
!important Exception

Syntax

css

/* specificity: inline > #id > .class > element */
element { }
.class-name { }
#id-name { }

Specificity Score Calculation

Specificity को एक चार-हिस्सों वाले score (0,0,0,0) के रूप में calculate किया जाता है। सबसे ज़्यादा से सबसे कम, columns inline styles, IDs, classes/attributes/pseudo-classes, और element tags represent करते हैं।

Note: debug करना मुश्किल specificity conflicts बनाने से बचने के लिए अपने selectors simple रखें।

Warning: गहराई से nested selectors न लिखें क्योंकि वे आपके specificity score को artificially बढ़ा देते हैं।

उदाहरण: The Specificity Score Calculation

css

<style>
p { color: black; }
.text { color: blue; }
#main { color: red; }
</style>
<p id="main" class="text">Highest specificity wins: red</p>

Element बनाम Class Specificity

Element selectors सीधे HTML tags को target करते हैं, जबकि class selectors custom classes को target करते हैं। एक class selector हमेशा किसी element tag selector पर जीतता है क्योंकि यह ज़्यादा specific है।

Note: अपनी CSS rules को reusable रखने के लिए components को style करने के लिए classes इस्तेमाल करें।

Warning: base elements को सीधे style करना आपके page पर accidental styling leaks पैदा कर सकता है।

उदाहरण: Element vs. Class Specificity

css

<style>
p { color: black; }
.highlight { color: green; }
</style>
<p class="highlight">Class beats element: green</p>

Class बनाम ID Specificity

एक ID selector आपके page पर एक single, unique element को point करता है। क्योंकि IDs unique होते हैं, वे group styling classes से कहीं ज़्यादा specificity weight रखते हैं।

Note: elements को style करने के लिए classes इस्तेमाल करें, और IDs को unique anchors और scripting के लिए बचाएँ।

Warning: IDs को अपने primary CSS styling selectors के रूप में इस्तेमाल करने से बचें, क्योंकि यह आपकी stylesheets को reuse करना मुश्किल बना देता है।

उदाहरण: Class vs. ID Specificity

css

<style>
.text { color: green; }
#unique { color: purple; }
</style>
<p id="unique" class="text">ID beats class: purple</p>

Inline Styles Override

Inline styles सीधे आपके HTML elements के अंदर style attribute इस्तेमाल करके declare की जाती हैं। क्योंकि वे सीधे element पर defined हैं, उनका specificity score (1,0,0,0) है और वे किसी भी stylesheet rule को override कर देते हैं।

Note: सिर्फ quick debugging या JavaScript से styled dynamic changes के लिए inline styles इस्तेमाल करें।

Warning: inline styles पर भरोसा करना आपकी पूरी site में design consistency maintain करना मुश्किल बना देता है।

उदाहरण: Inline Styles Override

css

<style>
p { color: green; }
</style>
<p style="color: orange;">Inline style wins: orange</p>

!important Exception

!important declaration CSS specificity में एक nuclear option है। किसी property value में जोड़े जाने पर, यह standard specificity score calculation को पूरी तरह bypass कर देता है, browser को उस rule को लागू करने पर मजबूर करते हुए।

Note: style overrides को force करने के लिए !important tag इस्तेमाल करने से बचें क्योंकि यह layout inheritance को बिगाड़ देता है और troubleshooting मुश्किल बना देता है।

Warning: !important का ज़्यादा इस्तेमाल specificity wars की ओर ले जाता है जो आपकी stylesheets को unmanageable बना देते हैं।

उदाहरण: The !important Exception

css

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

Live Example

Chapter Quiz — Complete all 22 topics to unlock

0/22 topics done

Complete these topics first:

← Previous Lesson CSS Counters Next Lesson → CSS Specificity Hierarchy