खासियत

सीएसएस का पॉडकास्ट - 003: स्पेसिफ़िकेशन

मान लें कि इन एचटीएमएल और सीएसएस का इस्तेमाल किया जा रहा है:

<button class="branding">Hello, Specificity!</button>

button {
  color: red;
}

.branding {
  color: blue;
}

यहां एक जैसे दो नियम हैं. एक बटन लाल और दूसरा बटन नीला होगा. एलिमेंट पर कौनसा नियम लागू होता है? प्रॉडक्ट की खासियत को समझने के लिए, सीएसएस के स्पेसिफ़िकेशन के एल्गोरिदम को समझना ज़रूरी है. इससे यह समझने में मदद मिलती है कि सीएसएस, एक-दूसरे से मुकाबला कैसे कर रही है.

खासियत, कैस्केड के चार अलग-अलग चरणों में से एक है, जिसे कैस्केड पर मौजूद आखिरी मॉड्यूल में शामिल किया गया था.

स्पेसिबिलिटी स्कोर

हर सिलेक्टर नियम को एक स्कोर मिलता है. खासियत को कुल स्कोर के तौर पर देखा जा सकता है और हर तरह के सिलेक्टर को उस स्कोर के लिए पॉइंट मिलते हैं. सबसे ज़्यादा स्कोर वाला सिलेक्टर, जीत गया.

किसी प्रोजेक्ट को सटीक बनाने के साथ-साथ, बैलेंसिंग ऐक्ट यह पक्का करता है कि जिन सीएसएस नियमों को लागू करना है वे असल में लागू हों. साथ ही, आम तौर पर स्कोर को कम रखते हुए,चीज़ों को जटिलता से बचाने के लिए ऐसा किया जाता है. सबसे ज़्यादा स्कोर हासिल करने की कोशिश करने के बजाय, स्कोर सिर्फ़ उतना ही ज़्यादा होना चाहिए जितना हमें चाहिए. आने वाले समय में, ऐसा हो सकता है कि बहुत ही ज़रूरी सीएसएस को लागू करना पड़े. अगर सबसे ज़्यादा स्कोर पाना है, तो यह काम मुश्किल हो जाएगा.

हर तरह के सिलेक्टर का स्कोर पाना

हर टाइप के सिलेक्टर को पॉइंट मिलते हैं. इन सभी बिंदुओं को सेलेक्टर की खासियत कैलकुलेट करने के लिए जोड़ा जाता है.

यूनिवर्सल सिलेक्टर

यूनिवर्सल सिलेक्टर (*) की कोई खास वैल्यू नहीं होती और उसे 0 पॉइंट मिलते हैं. इसका मतलब है कि एक या उससे ज़्यादा पॉइंट वाला कोई भी नियम उसे बदल देगा

* {
  color: red;
}

एलिमेंट या सूडो एलिमेंट सिलेक्टर

किसी एलिमेंट (टाइप) या स्यूडो-एलिमेंट सिलेक्टर को एक पॉइंट की खासियत मिलती है .

टाइप सिलेक्टर

div {
  color: red;
}

बदली हुई पहचान वाला एलिमेंट चुनने वाला

::selection {
  color: red;
}

क्लास, बदली हुई क्लास या एट्रिब्यूट सिलेक्टर

क्लास, स्यूडो क्लास या एट्रिब्यूट चुनने वाले टूल को 10 पॉइंट की खासियत मिलती है.

क्लास चुनने वाला

.my-class {
  color: red;
}

बदली हुई कैटगरी चुनने वाला टूल

:hover {
  color: red;
}

एट्रिब्यूट सिलेक्टर

[href='#'] {
  color: red;
}

:not() स्यूडो-क्लास, किसी स्पेसिफ़िकेशन में कोई वैल्यू नहीं जोड़ती है. हालांकि, आर्ग्युमेंट के तौर पर पास किए गए सिलेक्टर को स्पेसिफ़िकिटी कैलकुलेशन में जोड़ दिया जाता है.

div:not(.my-class) {
  color: red;
}

इस सैंपल की खासियत के 11 पॉइंट होंगे, क्योंकि इसमें एक टाइप सिलेक्टर (div) और :not() के अंदर एक क्लास है.

आईडी सिलेक्टर

अगर आपने एट्रिब्यूट सिलेक्टर ([id="myID"]) के बजाय, आईडी सिलेक्टर (#myID) का इस्तेमाल किया है, तो आईडी चुनने वाले को 100 पॉइंट मिलेंगे.

#myID {
  color: red;
}

इनलाइन स्टाइल एट्रिब्यूट

सीएसएस को सीधे एचटीएमएल एलिमेंट के style एट्रिब्यूट पर लागू किया जाता है, जिसे 1,000 पॉइंट का स्पेसिफ़िकेशन स्कोर मिलता है. इसका मतलब है कि सीएसएस में इसे बदलने के लिए, आपको एक बहुत ही खास सिलेक्टर लिखना होगा.

<div style="color: red"></div>

!important नियम

आखिर में, सीएसएस वैल्यू के आखिर में मौजूद !important को 10,000 पॉइंट का स्पेसिफ़िकेशन स्कोर मिलता है. किसी एक आइटम के लिए यह सबसे बड़ी खासियत होती है.

!important नियम सीएसएस प्रॉपर्टी पर लागू किया जाता है, इसलिए पूरे नियम (सिलेक्टर और प्रॉपर्टी) में मौजूद सभी चीज़ों को एक जैसा स्पेस नहीं मिलता.

.my-class {
  color: red !important; /* 10,000 points */
  background: white; /* 10 points */
}

आपने जो सीखा है उसकी जांच करें

किसी खास स्कोर से जुड़ी जानकारी को परखें

a[href="#"] का स्पेसिफ़िकेशन स्कोर क्या है?

1

a का मूल्य 1 पॉइंट है, लेकिन [href="#"] का मूल्य 10 पॉइंट है.

5

फिर से कोशिश करें!

11

a का 1 पॉइंट और [href="#"] 10 पॉइंट के बराबर है, जिससे कुल स्कोर 11 पॉइंट होगा.

संदर्भ के हिसाब से खासियत

किसी एलिमेंट से मेल खाने वाले हर सिलेक्टर की खासियत को एक साथ जोड़ दिया जाता है. एचटीएमएल के इस उदाहरण पर विचार करें:

<a class="my-class another-class" href="#">A link</a>

इस लिंक पर दो क्लास हैं. नीचे दिए गए सीएसएस को जोड़ने पर, इसे एक पॉइंट की खासियत मिलती है:

a {
  color: red;
}

इस नियम में दी गई क्लास में से किसी एक का रेफ़रंस दें, तो अब इसकी सटीकता के 11 पॉइंट हैं:

a.my-class {
  color: green;
}

सिलेक्टर में दूसरी क्लास जोड़ें. अब इसमें 21 खास पहलू जोड़े गए हैं:

a.my-class.another-class {
  color: rebeccapurple;
}

सिलेक्टर में href एट्रिब्यूट जोड़ें. अब इसमें 31 खास बातें मौजूद हैं:

a.my-class.another-class[href] {
  color: goldenrod;
}

आखिर में,इन सभी में एक :hover सूडो-क्लास जोड़ें. इसके बाद, सिलेक्टर के आखिर में 41 पॉइंट की खास बातें मौजूद हैं:

a.my-class.another-class[href]:hover {
  color: lightgrey;
}

आपने जो सीखा है उसकी जांच करें

किसी खास स्कोर से जुड़ी जानकारी को परखें

इनमें से कौनसा सिलेक्टर 21 पॉइंट के बराबर है?

article > section

एलिमेंट 1 पॉइंट के होते हैं, सिलेक्टर में 2 एलिमेंट होते हैं, जिससे यह 2 पॉइंट के बराबर हो जाता है.

article.card.dark

एलिमेंट 1 पॉइंट के होते हैं, क्लास 10 पॉइंट की होती हैं, और 2 क्लास और 1 एलिमेंट के साथ, ऐसा करने वाला सिलेक्टर 21 पॉइंट का है.

article:hover a[href]

एलिमेंट 1 पॉइंट के होते हैं, स्यूडो-क्लास और एट्रिब्यूट के लिए 10 पॉइंट होते हैं, एलिमेंट के लिए 2 पॉइंट, और एट्रिब्यूट और क्लास के लिए 20 पॉइंट, इस सिलेक्टर के लिए 22 पॉइंट हैं.

विज़ुअल की खासियत

डायग्राम और स्पेसिबिलिटी कैलकुलेटर में, सटीक जानकारी को अक्सर इस तरह से विज़ुअलाइज़ किया जाता है:

बायां ग्रुप, id सिलेक्टर है. दूसरा ग्रुप, क्लास, एट्रिब्यूट, और स्यूडो क्लास सिलेक्टर है. फ़ाइनल ग्रुप, एलिमेंट और स्यूडो एलिमेंट सिलेक्टर है.

संदर्भ के लिए, नीचे दिया गया सिलेक्टर 0-4-1 है:

a.my-class.another-class[href]:hover {
  color: lightgrey;
}

आपने जो सीखा है उसकी जांच करें

किसी खास चीज़ को विज़ुअलाइज़ करने के बारे में अपनी जानकारी की जांच करें

इनमें से कौनसा सिलेक्टर 1-2-1 है?

section#specialty.dark

इस सिलेक्टर को 1-1-1 के तौर पर दिखाया गया है.

#specialty:hover li.dark

🎉

[data-state-rad].dark#specialty:hover

इस सिलेक्टर को 1-3-0 के तौर पर दिखाया गया है.

li#specialty section.dark

इस सिलेक्टर को 1-1-2 के तौर पर दिखाया गया है.

व्यावहारिक रूप से बढ़ती विशेषता

मान लें कि हमारे पास कुछ सीएसएस हैं, जो इस तरह दिखती हैं:

.my-button {
  background: blue;
}

button[onclick] {
  background: grey;
}

कुछ इस तरह दिखने वाले एचटीएमएल के साथ:

<button class="my-button" onclick="alert('hello')">Click me</button>

बटन का बैकग्राउंड स्लेटी रंग का होता है, क्योंकि दूसरे सिलेक्टर को खासियत के लिए 11 पॉइंट (0-1-1) मिलते हैं. ऐसा इसलिए है, क्योंकि इसमें एक टाइप सिलेक्टर (button) है, जो 1 पॉइंट और एट्रिब्यूट सिलेक्टर ([onclick]) है, जिसमें 10 पॉइंट हैं.

पिछले नियम—.my-button— को 10 पॉइंट (0-1-0) मिलते हैं, क्योंकि इसमें एक क्लास सिलेक्टर है.

अगर आप इस नियम को बूस्ट करना चाहते हैं, तो क्लास सिलेक्टर को इस तरह दोहराएं:

.my-button.my-button {
  background: blue;
}

button[onclick] {
  background: grey;
}

अब बटन का बैकग्राउंड नीले रंग का होगा, क्योंकि नए सिलेक्टर को 20 पॉइंट (0-2-0) का स्पेसिफ़िक स्कोर मिलता है.

चेतावनी: अगर आपको लगता है कि आपको बार-बार इस तरह की खासियत को बूस्ट करने की ज़रूरत है, तो इसका मतलब है कि आप बहुत ज़्यादा सिलेक्टर लिख रहे हैं. यह सोचें कि क्या इस समस्या से बचने के लिए, अन्य सिलेक्टर की खासियत को कम करने के लिए, अपने सीएसएस को रीफ़ैक्टर किया जा सकता है.

मिलते-जुलते स्कोर के हिसाब से, सबसे नए इंस्टेंस की जीत होती है

फ़िलहाल, बटन के उदाहरण की बात करते हैं और सीएसएस को इस पर स्विच करते हैं:

.my-button {
  background: blue;
}

[onclick] {
  background: grey;
}

बटन का बैकग्राउंड स्लेटी है, क्योंकि दोनों सिलेक्टर की खासियत का स्कोर एक जैसा है (0-1-0).

अगर सोर्स ऑर्डर में नियमों को बदला जाता है, तो बटन का रंग नीला हो जाएगा.

[onclick] {
  background: grey;
}

.my-button {
  background: blue;
}

सिर्फ़ यही एक मामला है, जिसमें नई सीएसएस जीत गई है. ऐसा करने के लिए इसे उसी एलिमेंट को टारगेट करने वाले किसी दूसरे सिलेक्टर की खासियत से मेल खाना चाहिए.

संसाधन

• सीएसएस की स्पेसिफ़िकेशन
• स्पेसिफ़िटी कैलकुलेटर
• एमडीएन की खासियत
• सीएसएस की खासियत
• अन्य स्पेशियलिटी कैलकुलेटर