सीएसएस विशिष्टता

सीएसएस विशिष्टता अवधारणा न केवल एक जीभ ट्विस्टर का एक छोटा सा है (इसे तीन बार तेजी से कहने का प्रयास करें!), लेकिन यह थोड़ा दिमागी भी हो सकता है! यह सीएसएस में समझने के लिए और अधिक कठिन अवधारणाओं में से एक है। इस लेख में, हम इस बात पर चर्चा करेंगे कि विशिष्टता से हमारा क्या मतलब है, इसकी गणना कैसे की जाती है, और चयनकर्ताओं की रैंकिंग कैसे उस शैली को निर्धारित करती है जो पृष्ठ पर प्रस्तुत की जाती है। तो परेशान मत हो! आप कुछ ही समय में एक विशिष्टता विशेषज्ञ होंगे।

'विशिष्टता' का क्या अर्थ है?

CSS विशिष्टता मूल रूप से यह दर्शाती है कि चयनकर्ता कितना महत्वपूर्ण है। प्रत्येक चयनकर्ता को एक विशिष्टता सौंपी जाती है, जो इस बात पर निर्भर करता है कि वह किस प्रकार का है। चयनकर्ता की संख्या जितनी अधिक होगी, यह उतना ही अधिक विशिष्ट होगा और इस बात की संभावना अधिक होगी कि CSS का वह विशेष ब्लॉक स्टाइलिंग युद्ध जीतेगा।

विशिष्टता को चार संख्याओं द्वारा दर्शाया जाता है, प्रत्येक को अल्पविराम से अलग किया जाता है:

Selector specificity = 0, 0, 0, 0

जब हम विशिष्टता को बिना अल्पविराम (यानी 0000, 0101, 1001, आदि) के चार संख्याओं की एक स्ट्रिंग के रूप में देखते हैं, तो उच्चतर संख्या है, अधिक विशिष्ट यह है।

रैंक के आधार पर चयनकर्ताओं की विशिष्टता (निम्न - उच्च):

आइए रैंक के आधार पर विभिन्न प्रकार के तत्वों के बारे में जानें:

• ＊

सार्वभौमिक चयनकर्ता। इसकी विशिष्टता 0, 0, 0, 0 है। आमतौर पर आप इन्हें स्टाइल शीट के शीर्ष पर देखेंगे। यह महत्व के मामले में रैंक पर सबसे कम है। बहुत कुछ इसे ओवरराइड करेगा या सार्वभौमिक चयनकर्ता सीएसएस में जोड़ देगा।

• ＞, , '' ,

संयोजक, आमतौर पर एक प्रकार के चयनकर्ता या वर्ग चयनकर्ता के बच्चे के भाई का चयन करते समय देखा जाता है, विशिष्टता पर कोई प्रभाव नहीं पड़ता है और समग्र संख्या की गणना नहीं करता है। नकारात्मक छद्म वर्ग (:नहीं) भी इस विशिष्टता श्रेणी में फिट होते हैं।

• डिव, फॉर्म, उल, ली, आदि।

ये हैं प्रकार चयनकर्ता इन चयनकर्ताओं में बहुत कुछ शामिल होता है जिसे आपके HTML में एक टैग माना जा सकता है। इसका विशिष्टता वजन 0, 0, 0, 1 है। यदि आपके पास एक के बाद एक कई प्रकार के चयनकर्ता हैं जो एक संयोजनकर्ता द्वारा अलग किए गए हैं, तो आप चयनकर्ताओं को एक साथ जोड़ देंगे:

81% प्रतिभागियों ने कहा कि बूटकैंप में भाग लेने के बाद उन्हें अपनी तकनीकी नौकरी की संभावनाओं के बारे में अधिक आत्मविश्वास महसूस हुआ। आज ही एक बूटकैंप से मिलान करें।

बूटकैंप शुरू करने से लेकर अपनी पहली नौकरी खोजने तक, औसत बूटकैंप ग्रेड ने करियर संक्रमण में छह महीने से भी कम समय बिताया।

div li {} ⇐ the specificity is 0,0,0,2

div li p {} ⇐ the specificity is 0,0,0,3

• .मेन-कंटेनर, .navbar, [type="text"], :hover

विशिष्टता के लिए अगली पंक्ति में वर्ग, विशेषता और छद्म वर्ग चयनकर्ता हैं।

कक्षा चयनकर्ताओं को शुरुआत में डॉट ("।") द्वारा दर्शाया जाता है। विशेषता चयनकर्ताओं के पास इसके प्रकार चयनकर्ता के आगे वर्ग कोष्ठक के अंदर एक विशेषता होती है। छद्म-वर्ग चयनकर्ता विशेष तत्वों के लिए आरक्षित है जिन्हें अधिक विशिष्ट स्टाइल की आवश्यकता होती है। इनकी विशिष्टता 0, 0, 1, 0 है।

div.navlink a {}

- विशिष्टता 0, 0, 1, 1 है क्योंकि हमारे पास एक वर्ग चयनकर्ता है और हमारे पास एक प्रकार का चयनकर्ता है।

div.header li.list-item-disc button[type="submit"] {} 

- विशिष्टता 0, 0, 3, 3 है क्योंकि हमारे पास 3 प्रकार के चयनकर्ता और 2 वर्ग चयनकर्ता + 1 विशेषता चयनकर्ता हैं। यदि हम विशेषता चयनकर्ता को हटा देते हैं, तो विशिष्टता 0, 0, 2, 3 होगी। क्योंकि 23 33 से कम है, 0, 0, 3, 3 विशिष्टता वाला CSS चयनकर्ता जीत जाएगा क्योंकि इसकी विशिष्टता अधिक है।

• #नीला, #छिपा हुआ, वगैरह

आईडी चयनकर्ताओं की सीएसएस चयनकर्ताओं में सबसे अधिक विशिष्टता है:1, 0, 0, 0. आईडी विशेषता परिभाषा की अनूठी प्रकृति के कारण, जब हम अपने सीएसएस में आईडी को कॉल करते हैं तो हम आम तौर पर वास्तव में विशिष्ट तत्व को स्टाइल कर रहे होते हैं।

div#orange {}

- विशिष्टता 1, 0, 0, 1 है क्योंकि हमारे पास एक प्रकार चयनकर्ता और एक आईडी चयनकर्ता है। निम्नलिखित में से हमारी विशिष्टता के नियमों के अनुसार कौन सी शैली जीतती है?

div#orange {
	background-color: orange;
}
div.square {
	background-color: green;
	width: 150px;
	height: 150px;
}

1. पहले डिव में एक प्रकार चयनकर्ता और एक आईडी चयनकर्ता होता है, जो इसकी समग्र विशिष्टता 1, 0, 0, 1. बनाता है।
2. दूसरे डिव में एक प्रकार का चयनकर्ता और एक वर्ग चयनकर्ता होता है, जिससे इसकी समग्र विशिष्टता 0, 0, 1, 1 हो जाती है।

चूंकि 1001 11 से बड़ा है, इसलिए पहला डिव जीतता है और पृष्ठभूमि का रंग नारंगी होगा, जो सीएसएस की व्यापक प्रकृति के विपरीत है।

• इनलाइन-शैली

इनलाइन-स्टाइल इन सब में कैसे फिट बैठता है? यह और भी अधिक है आईडी चयनकर्ताओं की तुलना में विशिष्ट। एक इनलाइन-शैली आपकी सीएसएस फ़ाइल में लगभग किसी भी चीज़ को रौंद देगी। यह विशिष्टता के मामले में सबसे अधिक भारित है।

• !important नियम

!important कीवर्ड सब कुछ रौंद देता है। यह सबसे विशिष्ट है और CSS द्वारा निर्धारित किसी भी पिछले नियम को अधिलेखित कर देगा।

अभ्यास

नीचे दिए गए कोड संपादक में, मैंने कुछ यादृच्छिक वर्ग नामों और आईडी नामों के साथ नमूना कंटेनरों का एक पृष्ठ बनाया है। मैं चाहता हूं कि आप एक पल लें और विशिष्ट तत्वों को एक अलग रंग में बदलने के लिए अपने सीएसएस कौशल का उपयोग करके अभ्यास करें, जबकि अन्य सभी डिव एक ही रंग में रहें। आप उन नियमों को CSS में कैसे लिखेंगे? आप उच्चतम विशिष्टता प्राप्त करने के लिए क्या उपयोग करेंगे यदि आपको किसी निश्चित तत्व को लक्षित करने के लिए उपयोग करने की आवश्यकता है।

<!DOCTYPE html>
<html lang="en">
   <head>
       <meta charset="UTF-8" />
       <meta name="viewport" content="width=device-width, initial-scale=1.0" />
       <title>CSS Specificity</title>
       <style>
           body {
               width: 100%;
               max-width: 800px;
               margin: 0 auto;
           }
 
           main {
               width: 100%;
               height: 800px;
               display: flex;
               flex-wrap: wrap;
               flex-direction: column;
           }
 
           div {
               text-align: center;
           }
           *.square {
               /* what does the star mean here? Does it add to the specificity number at all? How can you test your hypothesis?  */
               height: 150px;
               width: 150px;
               background-color: black;
               color: white;
               margin: 20px;
           }
 
           div.flex {
               /* Does this compete with the other class at all? Or does it work in conjunction with the .square class? What would happen if we added a width and a height to this selector? Why does that happen?
          
               Does this override the div selector? Why? How does its specificity compare to the div selector's specificity?
          
               */
               display: flex;
               justify-content: center;
               align-items: center;
           }
           div#red {
               /* why does this one win out? What is the specificity of this div? */
               background-color: darkred;
           }
           #red {
               /* What would happen if we took the 'div' out of the previous selector? Which one wins?  */
               background-color: red;
           }
 
           main > div {
               font-size: 55px;
               font-weight: bold;
           }
 
           div#self-align {
               /*  What happens here?  */
               align-self: center;
           }
       </style>
   </head>
   <body>
       <main>
           <div id="self-align" class="square flex">1</div>
           <div class="square flex">2</div>
           <div class="square flex">3</div>
           <div class="square flex">4</div>
           <div class="square flex">5</div>
           <div id="red" class="square flex">6</div>
           <div class="square flex">7</div>
           <div class="square flex">8</div>
           <div class="square flex">9</div>
           <div class="square flex">10</div>
           <div class="square flex">11</div>
           <div class="square flex">12</div>
       </main>
   </body>
</html>

निष्कर्ष

इस लेख में हमने सीएसएस विशिष्टता पर चर्चा की - विशेष रूप से कौन से चयनकर्ता दूसरों की तुलना में अधिक विशिष्ट हैं और हम वास्तविक विशिष्टता संख्या का पता कैसे लगाते हैं। यदि यह पहली बार पढ़ने पर तुरंत आपके पास नहीं आता है तो निराश न हों। यह पचाने के लिए बहुत सारी जानकारी है। इसे बनाए रखें और आप इसे जल्द ही प्राप्त कर लेंगे!