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

CSS विशिष्टता एक CSS सेलेक्टर को दिया गया वज़न है जो यह निर्धारित करता है कि कौन सा स्टाइल नियम लागू होता है जब एकाधिक नियम एक ही तत्व से मेल खाते हैं। यह तीन-भाग मान (a, b, c) के रूप में दर्शाया जाता है जहां a ID सेलेक्टर, b क्लास/एट्रिब्यूट/सूडो-क्लास, और c एलिमेंट टाइप और सूडो-एलिमेंट गिनता है।

विशिष्टता एक सेलेक्टर में तीन श्रेणियों की गिनती करके गणना की जाती है: (a) ID सेलेक्टर जैसे #header, (b) क्लास सेलेक्टर (.card), एट्रिब्यूट सेलेक्टर ([type="text"]) और सूडो-क्लास (:hover, :nth-child), और (c) टाइप सेलेक्टर (div, p) और सूडो-एलिमेंट (::before)। यूनिवर्सल सेलेक्टर (*) और कॉम्बिनेटर (+, ~, >) की कोई विशिष्टता नहीं होती।

अधिक विशिष्टता वाला सेलेक्टर जीतता है। (a, b, c) मानों की बाएं से दाएं तुलना करें: अधिक ID (a) हमेशा अधिक क्लास (b) से जीतता है, और अधिक क्लास हमेशा अधिक एलिमेंट (c) से जीतती है। यदि विशिष्टता समान है, तो स्टाइलशीट में बाद में आने वाला नियम जीतता है।

संख्यात्मक स्कोर एक सरलीकृत तुलनीय मान (a * 10000 + b * 100 + c) है जो सेलेक्टर को रैंक करने के लिए उपयोग किया जाता है। इसे CSS मान के रूप में व्याख्या नहीं करनी चाहिए — CSS विशिष्टता एकल संख्या नहीं बल्कि तीन-भाग तुलना है।

!important विशिष्टता का हिस्सा नहीं है — यह विशिष्टता की परवाह किए बिना सभी अन्य घोषणाओं को ओवरराइड करता है। यह टूल केवल सेलेक्टर विशिष्टता की गणना करता है, !important के प्रभाव को नहीं। प्रोडक्शन CSS में !important का उपयोग करने से बचें।

नहीं। यूनिवर्सल सेलेक्टर (*) की शून्य विशिष्टता (0, 0, 0) है। कॉम्बिनेटर (+, >, ~, स्पेस) भी विशिष्टता में कुछ नहीं जोड़ते। केवल ID, क्लास, एट्रिब्यूट, सूडो-क्लास, एलिमेंट और सूडो-एलिमेंट सेलेक्टर विशिष्टता बढ़ाते हैं।

:not() सूडो-क्लास की स्वयं कोई विशिष्टता नहीं है, लेकिन इसके अंदर के सेलेक्टर की है। उदाहरण के लिए, :not(#id) विशिष्टता में (1, 0, 0) योगदान करता है (एक ID)। यह टूल कोष्ठकों के अंदर के तर्क को पार्स करके :not() को सही ढंग से संभालता है।

:: सूडो-एलिमेंट के लिए आधुनिक डबल-कोलन सिंटैक्स है (::before, ::after, ::placeholder)। सिंगल-कोलन लेगेसी सिंटैक्स (:before, :after) अभी भी ब्राउज़र द्वारा समर्थित है लेकिन पुराना है। दोनों c (एलिमेंट/सूडो-एलिमेंट) काउंट में 1 जोड़ते हैं।

इनलाइन स्टाइल (जैसे style="color: red") की विशिष्टता (1, 0, 0, 0) होती है — किसी भी सेलेक्टर से अधिक — एक चौथी श्रेणी के रूप में प्रदर्शित जो इस टूल में शामिल नहीं है। व्यावहारिक रूप से, इनलाइन स्टाइल हमेशा समान प्रॉपर्टी के स्टाइलशीट नियमों को ओवरराइड करते हैं।

हां। जब दो सेलेक्टर के समान (a, b, c) मान हों, तो स्रोत क्रम में बाद में आने वाला जीतता है। यह टूल समान स्कोर होने पर उन्हें समान रैंक के साथ प्रदर्शित करता है, और आप वास्तविक समानता की पुष्टि करने के लिए (a, b, c) विवरण देख सकते हैं।

उच्च विशिष्टता स्टाइल को ओवरराइड और बनाए रखना कठिन बनाती है। किसी स्टाइल को ओवरराइड करने के लिए और भी विशिष्ट सेलेक्टर लिखना या !important का उपयोग करना पड़ता है। कम विशिष्टता CSS को अधिक मॉड्यूलर और पूर्वानुमानित बनाती है।

यह टूल सबसे सामान्य CSS3 सेलेक्टर का समर्थन करता है जिसमें ID, क्लास, एट्रिब्यूट, सूडो-क्लास (सहित :not()), सूडो-एलिमेंट और टाइप सेलेक्टर शामिल हैं। जटिल आधुनिक सेलेक्टर जैसे :is(), :where(), :has() पूरी तरह पार्स नहीं हो सकते।