CSS स्पेसिफिसिटी कैलकुलेटर: कौन-सा सेलेक्टर जीतता है

इसका इस्तेमाल कैसे करें

सेलेक्टर को सेलेक्टर के खाने में लिखें, वैसे ही जैसे वह आपकी स्टाइल शीट में है।
तुलना के लिए दूसरा सेलेक्टर दूसरा सेलेक्टर (वैकल्पिक) के खाने में लिखें, या उसे खाली छोड़ दें।
पहले सेलेक्टर की स्पेसिफिसिटी (a, b, c) पढ़ें, और अगर आपने दो सेलेक्टर दिए हैं तो कौन-सा नियम जीतता है पढ़ें।
हर संख्या किस हिस्से से आई, यह गिने गए हिस्से तालिका में देखें।

तीन संख्याएँ कैसे गिनी जाती हैं

Selectors Level 3 Recommendation एक सेलेक्टर को तीन कॉलमों में गिनती है। टूल संख्याओं की तुलना बाएँ से दाएँ करता है: पहले a, फिर b, फिर c। सार्वभौमिक सेलेक्टर * और > व + जैसे कॉम्बिनेटर नहीं गिने जाते।

a ID सेलेक्टरों की संख्या है, जैसे #nav।
b क्लास सेलेक्टरों की संख्या है, जैसे .active; एट्रिब्यूट सेलेक्टरों की, जैसे [href]; और प्सेडो-क्लासों की, जैसे :hover।
c टाइप सेलेक्टरों की संख्या है, जैसे li या a; और प्सेडो-एलिमेंटों की, जैसे ::before।

तर्क लेने वाले प्सेडो-क्लास

:is(), :not() और :has() अपने सबसे विशिष्ट तर्क के बराबर गिने जाते हैं; इसलिए :is(#a, .b) का मान (1, 0, 0) है। :where() कुछ नहीं गिनता। :nth-child() एक प्सेडो-क्लास और उसकी "of S" सूची के सबसे विशिष्ट सेलेक्टर के बराबर गिना जाता है; इसलिए :nth-child(even of li, .item) का मान (0, 2, 0) है। ये नियम Selectors Level 4 ड्राफ्ट से लिए गए हैं, जो एक Editor's Draft है और बदल सकता है।

टूल क्या नहीं करता

::part(x) जैसे तर्क वाले प्सेडो-एलिमेंट को एक प्सेडो-एलिमेंट गिनता है, उसके तर्क को नहीं पढ़ता।
& से नेस्टिंग नहीं पढ़ता, और हर खाने में एक ही सेलेक्टर लेता है, अल्पविराम वाली सूची नहीं।
आपकी स्टाइल शीट नहीं देख सकता। इसलिए जब दो सेलेक्टर बराबर निकलते हैं, तो वह बताता है कि बाद वाला नियम जीतता है, और क्रम आप पर छोड़ता है।

हल किया हुआ उदाहरण: नेविगेशन बार का एक लिंक

पहला सेलेक्टर #nav li.active > a:hover में एक ID (#nav) है। इसमें दो क्लास और प्सेडो-क्लास (.active और :hover) और दो टाइप (li और a) हैं। इसकी स्पेसिफिसिटी (1, 2, 2) है। दूसरा सेलेक्टर #nav a में एक ID और एक टाइप है, इसलिए उसकी स्पेसिफिसिटी (1, 0, 1) है। पहला सेलेक्टर जीतता है, क्योंकि a बराबर है और b तथा c पहले सेलेक्टर के ज्यादा हैं।

सेलेक्टर	a	b	c
#nav li.active > a:hover	1	2	2
#nav a	1	0	1

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

ID पहले कॉलम में क्यों गिना जाता है?

टूल कॉलमों की तुलना बाएँ से दाएँ करता है, इसलिए ID वाला कॉलम a पहले तय होता है। जिस सेलेक्टर में एक ID ज्यादा है, उसका a बड़ा होता है, और तब b और c के क्लास और टाइप नहीं देखे जाते।

क्या नियमों का क्रम मायने रखता है?

केवल तब, जब दो सेलेक्टरों की स्पेसिफिसिटी बराबर हो। CSS Cascade Level 4 विनिर्देश कहता है कि उस बिंदु पर दस्तावेज के क्रम में आखिरी घोषणा जीतती है, यानी बाद वाला नियम लागू होता है।

क्या :not(#a) स्पेसिफिसिटी में जुड़ता है?

:not() प्सेडो-क्लास को खुद नहीं गिना जाता, पर उसका तर्क गिना जाता है। Selectors Level 3 का उदाहरण #s12:not(FOO) का मान (1, 0, 1) है: #s12 से एक ID, और तर्क FOO से एक टाइप।

क्या सार्वभौमिक सेलेक्टर और कॉम्बिनेटर कुछ जोड़ते हैं?

नहीं। सार्वभौमिक सेलेक्टर को अनदेखा किया जाता है, और उसी तरह >, + और ~ जैसे कॉम्बिनेटर भी। Level 3 खंड का * उदाहरण (0, 0, 0) की स्पेसिफिसिटी रखता है।

क्या यह टूल इनलाइन स्टाइल और !important को गिनता है?

नहीं। टूल एक सेलेक्टर गिनता है। कैस्केड स्पेसिफिसिटी से पहले मूल और महत्व की तुलना करता है, इसलिए !important वाला नियम या इनलाइन स्टाइल, सेलेक्टरों का स्कोर कुछ भी हो, जीत सकता है। केवल एक ही प्रॉपर्टी और एक ही महत्व वाले दो सेलेक्टर तुलना में रखें।

क्या मेरा लिखा सेलेक्टर कहीं भेजा जाता है?

नहीं। विश्लेषण आपके ब्राउज़र में होता है, और आपका लिखा कुछ भी सहेजा नहीं जाता या हमारे सर्वर को नहीं भेजा जाता। स्टाइल शीट बदलने से पहले नतीजा जाँच लें।

स्रोत

आँकड़े और टेक्स्ट आखिरी बार गुरुवार, 12 नवंबर 2026 को जाँचे गए।

परिणाम