खासियत

सीएसएस पॉडकास्ट - 003: खासियत

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

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

button {
  color: red;
}

.branding {
  color: blue;
}

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

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

विशेषता का स्कोर

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

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

हर सिलेक्टर टाइप के लिए स्कोर

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

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

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

* {
  color: red;
}

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

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

टाइप चुनने वाला

div {
  color: red;
}

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

::selection {
  color: red;
}

क्लास, pseudo-class या एट्रिब्यूट चुनने वाला टूल

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

क्लास चुनने का टूल

.my-class {
  color: red;
}

बदली हुई श्रेणी का सिलेक्टर

:hover {
  color: red;
}

एट्रिब्यूट चुनने वाला

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

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

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

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

आईडी चुनने वाला टूल

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

#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 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 pseudo-class जोड़ें, चुनने वाले टूल के आखिर में 41 खास बातें होती हैं:

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

देखें कि आपको कितना समझ आया है

विशेषज्ञता स्कोर के बारे में अपनी जानकारी को परखें

किसी चीज़ को विज़ुअलाइज़ करना

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

बायां ग्रुप id सिलेक्टर है. दूसरा ग्रुप, क्लास, एट्रिब्यूट, और स्यूडो-क्लास सिलेक्टर है. आखिरी ग्रुप, एलिमेंट और स्यूडो-एलिमेंट सिलेक्टर है.

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

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

देखें कि आपको कितना समझ आया है

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

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

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

.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;
}

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

संसाधन

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