CSS चयनकर्ता की शक्ति निर्धारित करने के लिए एक संख्यात्मक पैमाने का उपयोग करता है। शक्ति, जिसमें एक सबसे मजबूत है, या दूसरे शब्दों में, किस चयनकर्ता की विशिष्टता सबसे अधिक है। उच्चतम विशिष्टता संख्या वाला चयनकर्ता हमेशा निर्धारित करेगा कि एक HTML तत्व कैसा दिखता है, इससे कोई फर्क नहीं पड़ता कि अन्य कमजोर चयनकर्ताओं ने उस पर कौन सी शैलियों को लागू किया था।
यदि आपके पास एक बटन तत्व है, तो उस पर शैलियों को लागू करने के कई तरीके हैं। CSS में आमतौर पर उपयोग किए जाने वाले 3 चयनकर्ता हैं type , class , id ।
आप किसी तत्व को सीधे प्रकार चयनकर्ता के माध्यम से स्टाइल कर सकते हैं:
button {
background-color: red;
}आप एक वर्ग विशेषता का उपयोग कर सकते हैं:
.button {
background-color: red;
}या एक आईडी विशेषता:
#button {
background-color: red;
}प्रत्येक चयनकर्ता का संख्यात्मक मान 1 होता है।
तो यदि उपरोक्त सभी सीएसएस चयनकर्ताओं (प्रकार, वर्ग, आईडी) का एक ही मान (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 स्टाइलशीट में क्लास समान क्लास नाम वाली किसी भी पिछली क्लास से पहले आ जाएगी, जिससे आपके बटन का बैकग्राउंड कलर लाल हो जाएगा। इस तरह सीएसएस कैस्केड काम करता है, विशिष्टता का क्रम ऊपर से नीचे तक होता है, जिसमें नीचे चयनकर्ता जीतता है। याद रखें, यह केवल 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 बटन तत्व पर लक्षित कर रहे हैं - लेकिन पहले दो वर्गों में अतिरिक्त स्टाइलिंग गुण हैं। आपको क्या लगता है क्या होता है?
ये रहा परिणाम:
https://codepen.io/StrengthandFreedom/pen/mdyMGPL
जैसा कि आप देख सकते हैं, हमारा बटन तत्व हमारे 3 .hero-button से सभी स्टाइलिंग गुणों को एक साथ (संयुक्त) करता है कक्षाएं, और अब हमारे बटन तत्व को सभी 3 गुण मिलते हैं:
padding: 2rem;
font-size: 2rem;
background-color: red;दूसरे शब्दों में, जब आपकी स्टाइलशीट में समान नामों के साथ CSS चयनकर्ता होते हैं, तो आपको केवल तभी गुण ओवरराइड होंगे जब आपके चयनकर्ता समान गुणों को लक्षित करेंगे।
उपरोक्त उदाहरण में, सभी 3 वर्ग background-color . को लक्षित करते हैं संपत्ति, और यहां सीएसएस कैस्केड नियम (ऑर्डर विशिष्टता) के कारण निचला वर्ग जीतता है। लेकिन पिछले .hero-button . के बाद से आपके स्टाइलशीट लक्ष्य में वर्ग, न ही padding न ही font-size संपत्ति, उन गुणों को पहले दो .hero-button . से कक्षाओं को बटन तत्व पर लागू करने की अनुमति है।
इस बिंदु पर मैंने मरे हुए घोड़े को मारने का कारण यह है कि आप अनिवार्य रूप से अपने आप को ऐसी स्थिति में पाएंगे जहां आप एक विशाल, अव्यवस्थित सीएसएस कोडबेस से निपट रहे हैं, जहां कई डेवलपर्स ने आपके जीवन को दुखी करने में योगदान दिया है।
सबसे आम परिदृश्यों में से एक यह है कि विभिन्न डेवलपर्स ने स्टाइलशीट में सीएसएस कक्षाएं जोड़ दी हैं जो पहले से कहीं और मौजूद हैं, और यदि आप नहीं जानते हैं या भूल गए हैं तो यह जल्दी से भ्रम पैदा करेगा कि सीएसएस गुणों को एक साथ ढेर कर देगा जैसा हमने पहले देखा था।
तो आप एक सीएसएस वर्ग जोड़ सकते हैं जिसे कहा जाता है:primary-button निम्नलिखित गुणों के साथ:
.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; /*removes existing box shadow value*/
}मैं जानता हूं तुम क्या सोच्र रहे हो। यह किसी समस्या को हल करने का एक गन्दा तरीका है। सही। लेकिन कभी-कभी आप एक विशाल और असंगठित परियोजना (आमतौर पर बहुत सारे विरासत कोड के साथ) के संपर्क में आएंगे, जहां आपके पास सभी मौजूदा सीएसएस कोड तक पहुंच नहीं है (कुछ अनुभव वाला कोई भी डेवलपर इससे संबंधित हो सकता है)। इस प्रकार की स्थिति में, आप अपनी इच्छानुसार मौजूदा कोड को संशोधित नहीं कर सकते - आपको मौजूदा कोड को ओवरराइड करना होगा, और उस स्थिति में, यह जानना अच्छा है कि CSS विशिष्टता और स्रोत ऑर्डर कैसे काम करता है।
आप इस वेबसाइट पर विशिष्टता कैलकुलेटर का उपयोग समूह चयनकर्ताओं (चयनकर्ताओं के संयोजन) सहित विभिन्न सीएसएस चयनकर्ताओं की विशिष्टता संख्या की तुलना करने के लिए कर सकते हैं।
युक्ति:CSS में विशिष्टता के मुद्दों से निपटने से बचने का एक अच्छा तरीका है कि आप टाइप चयनकर्ताओं के बजाय अपने UI को स्टाइल करने के लिए प्राथमिक रूप से कक्षाओं का उपयोग करें, और केवल कम से कम आईडी का उपयोग करें। इसके अलावा, यदि आप कर सकते हैं तो समूह चयनकर्ताओं का उपयोग करने से बचें क्योंकि वे बढ़ते कोडबेस में अप्रत्याशित समस्याएं पैदा कर सकते हैं।