श्रेणी: डेवलपर टूल
CSS स्पेसिफ़िसिटी कैलकुलेटर
सिलेक्टर की स्पेसिफ़िसिटी की A-B-C स्कोर के रूप में तुलना करें
एक या अधिक CSS सिलेक्टर दर्ज करें और उनकी स्पेसिफ़िसिटी को ID-क्लास-एलिमेंट (A-B-C) स्कोर के रूप में निकालें, क्रमबद्ध ताकि आप देख सकें कौन-सा नियम जीतेगा। यह पूरी तरह आपके ब्राउज़र में चलता है।
| सिलेक्टर | स्पेसिफ़िसिटी (A-B-C) | ID | क्लास, एट्रिब्यूट, स्यूडो-क्लास | एलिमेंट, स्यूडो-एलिमेंट |
|---|---|---|---|---|
#nav .item > a:hover | 1-2-1 | 1 | 2 | 1 |
.card.featured | 0-2-0 | 0 | 2 | 0 |
button | 0-0-1 | 0 | 0 | 1 |
* | 0-0-0 | 0 | 0 | 0 |
इस पेज पर सब कुछ आपके ब्राउज़र में संसाधित होता है। कुछ भी अपलोड नहीं होता।
यह टूल क्या करता है
जब दो CSS नियम एक ही एलिमेंट को लक्षित करते हैं, तो जिसकी स्पेसिफ़िसिटी अधिक होती है वह जीतता है, न कि जो बाद में लिखा गया हो। स्पेसिफ़िसिटी तीन संख्याओं में गिनी जाती है: A ID सिलेक्टर के लिए, B क्लास, एट्रिब्यूट सिलेक्टर और स्यूडो-क्लास के लिए, और C एलिमेंट सिलेक्टर और स्यूडो-एलिमेंट के लिए। यह टूल आपके द्वारा दर्ज किए गए हर सिलेक्टर को पार्स करता है, जिसमें :not(), :is(), :has() और शून्य-स्पेसिफ़िसिटी वाला :where() भी शामिल है, और उसका A-B-C स्कोर दिखाता है ताकि आप अनुमान लगाने के बजाय सिलेक्टरों की सीधी तुलना कर सकें।
इस्तेमाल कैसे करें
- एक पंक्ति में एक सिलेक्टर दर्ज करें, जैसे #nav .item > a:hover।
- हर सिलेक्टर का A-B-C स्पेसिफ़िसिटी स्कोर पढ़ें।
- यह देखने के लिए स्पेसिफ़िसिटी से क्रमबद्ध करें कि टकराव में कौन-सा सिलेक्टर जीतेगा।
निजता
यह टूल पूरी तरह आपके ब्राउज़र में चलता है। आपका डेटा कभी अपलोड, सेव या साझा नहीं होता — टैब बंद करते ही वह हट जाता है।
अक्सर पूछे जाने वाले सवाल
- क्या मेरा CSS कहीं अपलोड होता है?
- नहीं। पार्सिंग पेज में चल रहे JavaScript में होती है, इसलिए किसी निजी स्टाइलशीट के सिलेक्टर कभी आपकी डिवाइस से बाहर नहीं जाते।
- :not(), :is() या :has() का स्कोर कैसे तय होता है?
- CSS स्पेसिफिकेशन के अनुसार ये अपने सबसे विशिष्ट आर्ग्युमेंट की स्पेसिफ़िसिटी का योगदान देते हैं, जबकि :where() अंदर जो भी हो, हमेशा शून्य का योगदान देता है।
- क्या इनलाइन स्टाइल या !important इस स्कोर को प्रभावित करते हैं?
- नहीं। यह टूल केवल सिलेक्टर स्कोर करता है। इनलाइन स्टाइल एट्रिब्यूट और !important दोनों A-B-C गिनती में जुड़ने के बजाय सामान्य स्पेसिफ़िसिटी को पूरी तरह ओवरराइड कर देते हैं।