CSS एक सिलेक्टर की शक्ति निर्धारित करने के लिए एक न्यूमेरिक स्केल का उपयोग करता है। शक्ति, जैसा कि कौन सा सबसे मजबूत है, या दूसरे शब्दों में, किस सिलेक्टर में सबसे अधिक स्पेसिफिसिटी है। सबसे अधिक स्पेसिफिसिटी नंबर वाला सिलेक्टर हमेशा निर्धारित करेगा कि HTML एलिमेंट कैसा दिखता है, चाहे अन्य, कमजोर सिलेक्टर्स द्वारा इस पर कौन सी स्टाइल्स लागू की गई हों।
यदि आपके पास एक बटन एलिमेंट है, तो उस पर स्टाइल्स लागू करने के कई तरीके हैं। CSS में 3 आमतौर पर उपयोग किए जाने वाले सिलेक्टर्स हैं type, class, id।
आप टाइप सिलेक्टर के माध्यम से सीधे किसी एलिमेंट को स्टाइल कर सकते हैं:
button { background-color: red; }आप क्लास एट्रिब्यूट का उपयोग कर सकते हैं:
.button { background-color: red; }या एक आईडी एट्रिब्यूट:
#button { background-color: red; }प्रत्येक सिलेक्टर का न्यूमेरिक मान 1 होता है।
तो यदि उपरोक्त सभी CSS सिलेक्टर्स (टाइप, क्लास, आईडी) का समान मान (1) है, तो जब एक ही स्टाइलशीट में उपयोग किया जाता है तो उपरोक्त नियम-सेट्स में से कौन सा जीतता है?
आईडी जीतता है (#button) क्योंकि आईडी क्लास और टाइप सिलेक्टर्स पर पूर्वता लेते हैं।
क्या होगा यदि कोई आईडी शामिल नहीं है?
तब क्लास सिलेक्टर (.button) जीतता है क्योंकि क्लासेस टाइप सिलेक्टर्स पर पूर्वता लेते हैं।
रुको, CSS के "कैस्केड" (CSS = कैस्केडिंग स्टाइल शीट्स) के बारे में क्या?
CSS में, यदि सभी चीजें बराबर हैं, तो जो भी सिलेक्टर आपकी स्टाइल शीट में अंतिम बार लागू किया गया है, वह जीतता है।
मान लीजिए आप अपने स्टाइलशीट में 3 क्लासेस जोड़ते हैं, जिनका समान नाम (.hero-button,) है। प्रत्येक क्लास एक ही स्टाइलिंग प्रॉपर्टी (background-color) को टारगेट करती है, लेकिन प्रत्येक क्लास के अलग-अलग प्रॉपर्टी मान हैं, इस मामले में, क्रमशः हरा, नीला, लाल।
.hero-button { background-color: green; } .hero-button { background-color: blue; } .hero-button { background-color: red; }फिर आप उन सभी 3 को उसी HTML एलिमेंट पर लागू करते हैं:
<button class="hero-button">Button</button>स्टाइलशीट में अंतिम .hero-button क्लास किसी भी पिछली क्लास पर पूर्वता लेगी जिसका समान क्लास नाम है, जिससे आपके बटन का बैकग्राउंड कलर लाल हो जाएगा। इस तरह CSS कैस्केड काम करता है, स्पेसिफिसिटी का क्रम ऊपर से नीचे तक है, नीचे वाला सिलेक्टर जीतता है। याद रखें, यह केवल 100% सच है जब सभी चीजें बराबर हैं।
महत्वपूर्ण: यदि आपके पास समान नाम वाले कई सिलेक्टर्स हैं, तो आपके स्टाइलशीट के नीचे वाला नहीं उसी नाम वाले पिछले सिलेक्टर द्वारा लागू सभी स्टाइल्स को ओवरराइड करेगा, यह केवल निर्दिष्ट स्टाइलिंग प्रॉपर्टी को ओवरराइड करेगा।
भ्रमित?
चिंता न करें, एक पल में समझ आ जाएगा।
यहां पहले वाले 3 .hero-button क्लासेस हैं, सभी पहले वाले समान background-color प्रॉपर्टीज़ के साथ, लेकिन पहले दो क्लासेस को प्रत्येक को एक अतिरिक्त स्टाइलिंग प्रॉपर्टी (padding & font-size) मिल रही है:
.hero-button { background-color: green; padding: 2rem; } .hero-button { background-color: blue; font-size: 2rem; } .hero-button { background-color: red; }हमारे स्टाइलशीट में अब 3 CSS क्लासेस हैं, समान नाम के साथ, सभी HTML बटन एलिमेंट पर समान background-color प्रॉपर्टी को टारगेट कर रही हैं — लेकिन पहले दो क्लासेस में अतिरिक्त स्टाइलिंग प्रॉपर्टीज़ हैं। आप क्या सोचते हैं क्या होता है?
यहां परिणाम है:
https://codepen.io/StrengthandFreedom/pen/mdyMGPL
जैसा कि आप देख सकते हैं, हमारा बटन एलिमेंट हमारे 3 .hero-button क्लासेस से सभी स्टाइलिंग प्रॉपर्टीज़ को एक साथ जोड़ता (कंबाइन करता) है, और अब हमारे बटन एलिमेंट को सभी 3 प्रॉपर्टीज़ मिलती हैं:
padding: 2rem; font-size: 2rem; background-color: red;दूसरे शब्दों में, जब आपके स्टाइलशीट में समान नाम वाले CSS सिलेक्टर्स होते हैं, तो आपको प्रॉपर्टीज़ केवल तभी ओवरराइड होंगी यदि आपके सिलेक्टर्स समान प्रॉपर्टीज़ को टारगेट करते हैं।
उपरोक्त उदाहरण में, सभी 3 क्लासेस background-color प्रॉपर्टी को टारगेट करती हैं, और यहां नीचे वाली क्लास जीतती है, CSS कैस्केड नियम (ऑर्डर स्पेसिफिसिटी) के कारण। लेकिन चूंकि आपके स्टाइलशीट में अंतिम .hero-button क्लास न तो padding और न ही font-size प्रॉपर्टी को टारगेट करती है, पहले दो .hero-button क्लासेस की उन प्रॉपर्टीज़ को बटन एलिमेंट पर लागू करने की अनुमति है।
मैं इस बिंदु पर इतना जोर इसलिए दे रहा हूं क्योंकि आप अनिवार्य रूप से खुद को ऐसी स्थिति में पाएंगे जहां आप एक विशाल, अव्यवस्थित CSS कोडबेस से निपट रहे हैं, जहां कई डेवलपर्स ने आपके जीवन को दयनीय बनाने में योगदान दिया है।
सबसे आम परिदृश्यों में से एक यह है कि अलग-अलग डेवलपर्स ने स्टाइलशीट में CSS क्लासेस जोड़ी हैं जो पहले से ही कहीं और मौजूद हैं, और यदि आप नहीं जानते या भूल गए कि CSS प्रॉपर्टीज़ को एक साथ स्टैक करेगा जैसा हमने पहले देखा, तो यह जल्दी से भ्रम पैदा करेगा।
तो आप primary-button नामक एक CSS क्लास जोड़ सकते हैं जिसमें निम्नलिखित प्रॉपर्टीज़ हैं:
.primary-button { background-color: red padding: 1rem; font-size: 1.125rem; }फिर भी किसी कारण से, आपके बटन पर एक शैडो दिखाई देती है, जिसे आपने नहीं जोड़ा। खैर, यह कुछ चीजों के कारण हो सकता है, या तो क्योंकि किसी ने बटन एलिमेंट पर सीधे स्टाइलिंग लागू की है:
button { box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.1); }या क्योंकि किसी ने पहले स्टाइलशीट में उसी नाम की एक क्लास जोड़ी थी, और box-shadow प्रॉपर्टी जोड़ी थी, जैसे:
.primary-button { box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.1); }अवांछित स्टाइलिंग को हटाने के लिए, आपको या तो अपने कोडबेस में उस स्थान का पता लगाना होगा जहां यह अवांछित प्रॉपर्टी लागू की गई है और इसे हटाना होगा या सीधे इसे आपकी .primary-button क्लास में टारगेट करके हटाना होगा, जैसे:
.primary-button { background-color: red padding: 1rem; font-size: 1.125rem; box-shadow: 0; /*मौजूदा बॉक्स शैडो मान को हटाता है*/ }मैं जानता हूं कि आप क्या सोच रहे हैं। यह समस्या हल करने का एक गन्दा तरीका है। सही। लेकिन कभी-कभी आप एक विशाल और अव्यवस्थित परियोजना (आमतौर पर बहुत सारे लिगेसी कोड के साथ) के संपर्क में आएंगे, जहां आपके पास सभी मौजूदा CSS कोड तक पहुंच नहीं है (कुछ अनुभव वाला कोई भी डेवलपर इससे संबंधित हो सकता है)। इस प्रकार की स्थिति में, आप बस मौजूदा कोड को अपनी इच्छानुसार संशोधित नहीं कर सकते — आपको मौजूदा कोड को ओवरराइड करना होगा, और उस मामले में, यह जानना अच्छा है कि CSS स्पेसिफिसिटी और सोर्स ऑर्डर कैसे काम करता है।
आप इस वेबसाइट पर स्पेसिफिसिटी कैलकुलेटर का उपयोग विभिन्न CSS सिलेक्टर्स की स्पेसिफिसिटी नंबर की तुलना करने के लिए कर सकते हैं, जिसमें ग्रुप सिलेक्टर्स (सिलेक्टर्स को मिलाना) शामिल हैं।
टिप: CSS में स्पेसिफिसिटी मुद्दों से निपटने से बचने का एक अच्छा तरीका है अपने UI को स्टाइल करने के लिए मुख्य रूप से क्लासेस का उपयोग करना, टाइप सिलेक्टर्स के बजाय, और आईडी का केवल संयम से उपयोग करना। साथ ही, यदि आप कर सकते हैं तो ग्रुप सिलेक्टर्स का उपयोग करने से बचें क्योंकि वे बढ़ती कोडबेस में अप्रत्याशित समस्याएं पैदा कर सकते हैं।
