CSS स्पेसिफिसिटी कैलकुलेटर
सिलेक्टर एक-एक करके हर लाइन में पेस्ट करें, और हर एक की स्पेसिफिसिटी का ब्रेकडाउन उसी क्रम में देखें जिस क्रम में कैस्केड असल में उन्हें लागू करेगा।
नतीजे यहाँ दिखेंगे, सबसे ज़्यादा से सबसे कम स्पेसिफिसिटी के क्रम में रैंक किए हुए।
यह कैसे काम करता है
हर सिलेक्टर को कॉम्बिनेटर पर तोड़ा और टोकनाइज़ किया जाता है: #id टोकन ID के
रूप में गिने जाते हैं, .class, [attr], और
:pseudo-class टोकन क्लास के रूप में गिने जाते हैं, और सादे एलिमेंट नाम व
::pseudo-elements एलिमेंट के रूप में गिने जाते हैं। यूनिवर्सल सिलेक्टर
* और कॉम्बिनेटर जैसे >, +, ~ कुछ
नहीं जोड़ते। हर सिलेक्टर आखिर में एक ट्रिपल (IDs, classes, elements) बन जाता
है, जो बिल्कुल वैसा ही है जैसे CSS स्पेक खुद स्पेसिफिसिटी परिभाषित करता है, इसलिए यहाँ की
रैंकिंग वही होती है जो आपके ब्राउज़र का कैस्केड असल में करेगा।
सब कुछ इस पेज के जावास्क्रिप्ट में हर कीस्ट्रोक पर चलता है। पूरी स्टाइलशीट जितने सिलेक्टर पेस्ट करने पर भी वे आपके ब्राउज़र से बाहर कभी नहीं जाते।
अक्सर पूछे जाने वाले सवाल
स्पेसिफिसिटी कैसे कैलकुलेट की जाती है?
इसे चार गिने जाने वाले स्तरों में मापा जाता है: पहले इनलाइन स्टाइल, फिर ID सिलेक्टर, फिर क्लास/एट्रिब्यूट सिलेक्टर/स्यूडो-क्लास, और अंत में एलिमेंट व स्यूडो-एलिमेंट सिलेक्टर। ऊँचा स्तर हमेशा निचले स्तर पर भारी पड़ता है, चाहे आप निचले स्तर के कितने भी सिलेक्टर जोड़ लें—इसलिए 1 ID (0,1,0,0) हमेशा 20 क्लास (0,0,20,0) पर भारी पड़ती है।
मेरे दो सिलेक्टर बराबर (टाई) क्यों हो जाते हैं?
जब स्पेसिफिसिटी बिल्कुल बराबर हो, तो CSS सोर्स ऑर्डर पर निर्भर करता है: स्टाइलशीट में जो रूल बाद में आता है (या बाद में जोड़ा गया है), वही जीतता है। यह टूल टाई होने पर उसी क्रम में सॉर्ट करता है जिस क्रम में आपने सिलेक्टर पेस्ट किए थे, ताकि यही व्यवहार मैच करे।
क्या यह मेरा CSS कहीं भेजता है?
नहीं। सिलेक्टर पूरी तरह आपके ब्राउज़र में एक छोटे जावास्क्रिप्ट टोकनाइज़र से पार्स और स्कोर किए जाते हैं। कुछ भी अपलोड नहीं होता।