CSS विशिष्टता कैलकुलेटर

CSS विशिष्टता क्या है?#

जब दो CSS नियम दोनों एक ही तत्व पर एक ही गुण सेट करने का प्रयास करते हैं, तो ब्राउज़र सबसे अंत में लिखे गए को नहीं चुनता — वह चुनता है जिसकी विशिष्टता अधिक है। विशिष्टता एक तीन-भाग का स्कोर (A, B, C) है जिसकी कैस्केड संस्करण संख्या की तरह तुलना करता है:

• A — ID चयनकर्ता (#header)।
• B — क्लास चयनकर्ता (.btn), एट्रिब्यूट चयनकर्ता ([type=email]), और छद्म-क्लास (:hover, :focus)।
• C — टाइप चयनकर्ता (div, a) और छद्म-एलिमेंट (::before, ::first-line)।

A की पहले तुलना; बराबरी होने पर B पर, फिर C पर। एक ID (1,0,0) किसी भी संख्या में क्लासेस (0,99,99) को हराता है, जो बदले में किसी भी संख्या में टाइप को हराता है। सार्वभौमिक *, कॉम्बिनेटर (> + ~), और नेस्टिंग चयनकर्ता & कुछ नहीं जोड़ते।

यह पृष्ठ आपके द्वारा चिपकाए गए किसी भी चयनकर्ता हेतु वह टपल गणना करता है — आधुनिक कार्यात्मक छद्म-क्लासेस :is(), :where(), :not(), :has() और :nth-child() के of S क्लॉज़ सहित — चयनकर्ताओं की सूची क्रमबद्ध करता है, और ठीक दिखाता है कि किसने क्या योगदान दिया। यह सार्वभौमिक CSS प्रश्न का सबसे तेज़ उत्तर है: “मेरा नियम क्यों हार रहा है?”

इसका उपयोग कैसे करें#

1. काम किए हुए चयनकर्ताओं का सेट लोड करने हेतु नमूना क्लिक करें, या बॉक्स साफ़ करें और अपना चिपकाएँ। आप कोई सादा चयनकर्ता (#nav .item) या पूरा नियम (#nav .item { color: red }) दर्ज कर सकते हैं; टूल { से पहले का हिस्सा पढ़ता है।
2. कई चयनकर्ता? उन्हें कॉमा से अलग करें — वे सबसे अधिक से सबसे कम विशिष्ट तक क्रमबद्ध होते हैं, और विजेता चिह्नित होता है।
3. दायाँ पैन प्रत्येक चयनकर्ता को उसके (A, B, C) टपल और हर योगदानी टुकड़े के रंगीन विभाजन के साथ सूचीबद्ध करता है (लाल = ID, नीला = क्लास/एट्रिब्यूट/छद्म-क्लास, हरा = टाइप/छद्म-एलिमेंट), ताकि आप देख सकें क्यों स्कोर वही है जो है।
4. ऊपर दायें का रंगीन लीजेंड आपको याद दिलाता है कि कौन-सा बिंदु A / B / C से मैप होता है।
5. यदि आपके नियम में !important था, तो एक सूचनात्मक नोट दिखाई देता है — !important एक घोषणा-स्तरीय ओवरराइड है जो विशिष्टता तुलना के ऊपर बैठता है, भीतर नहीं।

मुख्य विशेषताएँ#

• कठिन मामलों पर सही। :where() हमेशा (0,0,0) योगदान देता है; :is() / :not() / :has() अपने तर्कों में से उच्चतम विशिष्टता लेते हैं; विरासत :before और :nth-child() के of S क्लॉज़ Selectors Level 4 के अनुसार संभाले जाते हैं।
• कॉमा-विभाजित सूची क्रमबद्ध और बराबरी चिह्नित करता है, ताकि आप एक नज़र में देख सकें कि कई नियमों में से कौन जीतेगा।
• प्रति-टुकड़ा विभाजन। हर #id, .class, [attr], :pseudo-class, ::pseudo-element, और टाइप मदवार है उस सटीक टेक्स्ट के साथ जो उसने योगदान दिया।
• पूर्ण नियमों के प्रति सहनशील। a:hover { text-decoration: underline } चिपकाएँ — टिप्पणियाँ हटाई जाती हैं और घोषणा ब्लॉक स्वतः अनदेखा।
• 100% स्थानीय। कुछ भी पृष्ठ से बाहर नहीं जाता; कोई स्टाइलशीट ली या मूल्यांकित नहीं।

विस्तृत उदाहरण#

एक सामान्य डीबगिंग पहेली: तीन नियम सभी एक ही लिंक को लक्षित करते हैं, और गलत रंग जीतता है। उन्हें बॉक्स में चिपकाएँ:

.button:hover
:is(.card, #hero) .button
a.button

आउटपुट उन्हें क्रमबद्ध करता है:

विजेता सबसे अधिक क्लासेस वाला नहीं है। :is(.card, #hero) अपने तर्कों की उच्चतम विशिष्टता विरासत में लेता है — #hero एक ID है, इसलिए :is() (1,0,0) लिए हुए चलता है भले ही .card केवल (0,1,0) होगा। .button जोड़ने से B एक बढ़ जाता है, (1,1,0) देता है। A कॉलम में वह एकल ID .button:hover की दो क्लासेस (0,2,0) को हराता है — जो कि ठीक वही आश्चर्य है जो :is() को उत्पादन CSS में खतरनाक बनाता है।

यदि आपको विशिष्टता बढ़ाए बिना वही समूहन चाहिए, तो आप :is() को :where() से बदल देते:

:where(.card, #hero) .button   →   (0, 1, 0)

अब यह a.button से टाई है टाइप को घटाकर, और स्रोत क्रम तय करता है। यही पूरा कारण है कि :where() मौजूद है।

अक्सर पूछे जाने वाले प्रश्न#

एक ID सैकड़ों क्लासेस को क्यों हराता है?#

विशिष्टता संस्करण संख्या की तरह कॉलम को बायें से दायें तुलना करती है, कुल योग के रूप में नहीं। (1,0,0) (0,999,999) से “आगे” है क्योंकि पहले में कॉलम A गैर-शून्य है और दूसरे में शून्य; कॉलम B और C कभी संदर्भ ही नहीं। यह जानबूझकर है — ID को असंदिग्ध एकल के रूप में माना गया था।

:is() और :where() में क्या अंतर है?#

वे जो मिलाते हैं वह एक समान हैं, लेकिन विशिष्टता में विपरीत। :is(.a, #b) अपने तर्कों में उच्चतम विशिष्टता लेता है (इसलिए #b इसे (1,0,0) बनाता है); :where(.a, #b) हमेशा अपने तर्कों की परवाह किए बिना (0,0,0) योगदान देता है। कम-विशिष्टता डिफ़ॉल्ट हेतु जिन्हें आप आसानी से ओवरराइड कर सकें :where() उपयोग करें, और :is() जब आप वास्तव में चाहते हैं कि संयुक्त चयनकर्ता प्रतिस्पर्धा करे।

क्या इनलाइन style="…" एट्रिब्यूट इन्हें हराता है?#

हाँ। इनलाइन शैलियाँ सामान्य कैस्केड में किसी भी चयनकर्ता-आधारित नियम से ऊपर (वे एक उच्च मूल पर) होती हैं, इसलिए !important रहित कोई चयनकर्ता टपल इनलाइन शैली को ओवरराइड नहीं करेगा। यह (A,B,C) स्कोर से एक अलग अक्ष है, इसीलिए टूल केवल चयनकर्ताओं का मूल्यांकन करता है।

!important कहाँ फ़िट होता है?#

!important एक घोषणा-स्तरीय फ़्लैग है, चयनकर्ता गुण नहीं — यह (A,B,C) टपल नहीं बदलता। यह पूरी घोषणा को एक उच्च कैस्केड मूल में ले जाता है, इसलिए कोई !important नियम विशिष्टता की परवाह किए बिना सामान्य नियम को हराता है। टूल इसकी उपस्थिति सूचनात्मक रूप से नोट करता है पर स्कोर से बाहर रखता है।