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

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

जब दो CSS नियम एक ही एलिमेंट को टारगेट करते हैं और एक ही प्रॉपर्टी सेट करते हैं, तो ब्राउज़र को विजेता चुनना होता है। यह फैसला specificity (विशिष्टता) से होता है — यह स्कोर इस्तेमाल किए गए सिलेक्टर्स के प्रकार से बनता है, न कि स्टाइलशीट में लिखे जाने के क्रम से (क्रम केवल अंतिम टाई-ब्रेकर के रूप में मायने रखता है)। यह कैलकुलेटर एक या अधिक CSS सिलेक्टर्स लेकर हर एक की विशिष्टता निकालता है, ताकि आप एक नज़र में देख सकें कि कौन-सा नियम असल में लागू होगा।

विशिष्टता की गणना कैसे होती है

विशिष्टता तीन गिनतियों का एक समूह है, जिसे आमतौर पर (a, b, c) लिखा जाता है:

$$specificity = (a, b, c)$$

• a — ID सिलेक्टर्स की संख्या (#header)
• b — क्लास सिलेक्टर्स, एट्रिब्यूट सिलेक्टर्स, और pseudo-classes की संख्या (.button, [type="text"], :hover, :nth-child(2))
• c — टाइप (एलिमेंट) सिलेक्टर्स और pseudo-elements की संख्या (div, a, ::before)

सिलेक्टर्स की तुलना बाएं से दाएं, कॉलम दर कॉलम होती है: जिसका a ज़्यादा है वह हमेशा जीतता है, चाहे b या c कुछ भी हो; केवल जब a बराबर हो तभी b फैसला करता है; और केवल जब a और b दोनों बराबर हों तभी c फैसला करता है। विशिष्टता दशमलव नहीं है — (0, 1, 0), (0, 0, 99) से जीतता है चाहे दूसरी तरफ कितने भी एलिमेंट सिलेक्टर्स हों, क्योंकि तुलना कभी कॉलम के आर-पार कैरी नहीं होती।

कुछ सिलेक्टर्स खास मामले हैं:

• यूनिवर्सल सिलेक्टर (*) और कॉम्बिनेटर्स (स्पेस, >, +, ~) किसी भी कॉलम में कुछ नहीं जोड़ते।
• :where(...) हमेशा (0, 0, 0) देता है, चाहे इसके अंदर कुछ भी हो — यह खासतौर पर सिलेक्टर लॉजिक जोड़ने के लिए बना है, विशिष्टता जोड़ने के लिए नहीं।
• :is(...), :not(...), और :has(...) अपने सबसे विशिष्ट आर्ग्युमेंट की विशिष्टता देते हैं (सभी का जोड़ नहीं)।
• इनलाइन style="..." एट्रिब्यूट और !important घोषणाएं सामान्य विशिष्टता को पूरी तरह ओवरराइड कर देती हैं; यह कैलकुलेटर केवल स्टाइलशीट में लिखे सिलेक्टर्स की तुलना करता है।

उदाहरण

#nav .item:hover की तुलना header nav ul li a से करें:

• #nav .item:hover → 1 ID (#nav), 2 क्लास/pseudo-class (.item, :hover), 0 एलिमेंट → (1, 2, 0)
• header nav ul li a → 0 ID, 0 क्लास, 5 एलिमेंट (header, nav, ul, li, a) → (0, 0, 5)

दूसरे सिलेक्टर में पांच एलिमेंट नाम जुड़े होने के बावजूद, पहला सिलेक्टर साफ जीतता है — एक ID सिलेक्टर किसी भी संख्या के टाइप सिलेक्टर्स से आगे रहता है।

इस कैलकुलेटर का उपयोग कैसे करें

1. टेक्स्ट बॉक्स में एक या अधिक CSS सिलेक्टर्स पेस्ट करें, एक लाइन में एक (या कॉमा से अलग किए हुए, ठीक असली स्टाइलशीट की तरह)।
2. हर सिलेक्टर के ID / क्लास / एलिमेंट काउंट, उसकी विशिष्टता, और कौन-सा सिलेक्टर कुल मिलाकर जीतता है — यह टेबल देखने के लिए Calculate पर क्लिक करें।
3. इसका इस्तेमाल "मेरा CSS नियम क्यों लागू नहीं हो रहा?" जैसी समस्याओं को सुलझाने, किसी मौजूदा नियम को ओवरराइड करने के लिए नए नियम की विशिष्टता तय करने, या किसी स्टाइलशीट में ऐसे बहुत ज़्यादा विशिष्ट सिलेक्टर्स ढूंढने के लिए करें जिन्हें बाद में ओवरराइड करना मुश्किल हो।