खासियत

The CSS Podcast - 003: Specificity

मान लें कि आपको इस एचटीएमएल और सीएसएस के साथ काम करना है:

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

.branding {
  color: blue;
}

button {
  color: red;
}

यहां एक ही एलिमेंट को टारगेट करने वाले दो नियम हैं. हर नियम में एक ऐसा एलान होता है जिससे बटन का रंग सेट किया जाता है: एक नियम में बटन का रंग लाल सेट करने की कोशिश की जाती है, जबकि दूसरे नियम में बटन का रंग नीला सेट करने की कोशिश की जाती है. इस एलिमेंट पर कौनसा एलान लागू होता है?

सीएसएस स्पेसिफ़िसिटी एल्गोरिदम को समझना, यह समझने के लिए ज़रूरी है कि सीएसएस, एक जैसे कई नियमों में से किसी एक को कैसे चुनती है.

खासियत, कैस्केड के अलग-अलग चरणों में से एक है. इसके बारे में पिछले मॉड्यूल, कैस्केड में बताया गया था.

खासियत के आधार पर स्कोरिंग

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

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

खासियत, दशमलव संख्या नहीं होती, बल्कि तीन अंकों की संख्या होती है. इसमें तीन कॉम्पोनेंट होते हैं: A, B, और C.

• A: आईडी से मिलती-जुलती जानकारी
• B: क्लास के हिसाब से खास जानकारी
• C: एलिमेंट की तरह खास जानकारी

इसे अक्सर (A,B,C) नोटेशन का इस्तेमाल करके दिखाया जाता है. उदाहरण के लिए: (1,0,2). A-B-C नोटेशन का भी आम तौर पर इस्तेमाल किया जाता है.

खास जानकारी की तुलना करने का तरीका

सटीकता की तुलना करने के लिए, तीन कॉम्पोनेंट की तुलना इस क्रम में की जाती है: जिसकी A वैल्यू ज़्यादा होती है वह ज़्यादा सटीक होती है; अगर दो A वैल्यू बराबर होती हैं, तो जिसकी B वैल्यू ज़्यादा होती है वह ज़्यादा सटीक होती है; अगर दो B वैल्यू भी बराबर होती हैं, तो जिसकी C वैल्यू ज़्यादा होती है वह ज़्यादा सटीक होती है; अगर सभी वैल्यू बराबर होती हैं, तो दोनों सटीकताओं की वैल्यू बराबर होती है.

उदाहरण के लिए, (0,4,3) की तुलना में (1,0,0) को ज़्यादा सटीक माना जाता है, क्योंकि (1,0,0) में A एट्रिब्यूट की वैल्यू (1) (0,4,3) में A एट्रिब्यूट की वैल्यू (0) से ज़्यादा है.

सिलेक्टर से प्राथमिकता तय होती है

विशिष्टता के ट्राइड में हर हिस्से की वैल्यू 0 से शुरू होती है. इसलिए, डिफ़ॉल्ट विशिष्टता (0,0,0) होती है. किसी सिलेक्टर का हर हिस्सा, खास जानकारी को बढ़ाता है. सिलेक्टर के टाइप के आधार पर, यह A, B या C की वैल्यू को बढ़ाता है.

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

यूनिवर्सल सिलेक्टर (*) कोई खास जानकारी नहीं जोड़ता है. इससे इसकी वैल्यू, (0,0,0) की शुरुआती खास जानकारी पर बनी रहती है.

* {
  color: red;
}

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

एलिमेंट (टाइप) या स्यूडो-एलिमेंट सिलेक्टर, एलिमेंट जैसी खास जानकारी जोड़ता है. इससे C कॉम्पोनेंट में 1 की बढ़ोतरी होती है.

यहां दिए गए उदाहरणों में, कुल मिलाकर (0,0,1) की विशेषता है.

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

div {
  color: red;
}

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

::selection {
  color: red;
}

क्लास, सूडो-क्लास या एट्रिब्यूट सिलेक्टर

क्लास, स्यूडो-क्लास या एट्रिब्यूट सिलेक्टर, क्लास जैसी खास जानकारी जोड़ता है. इससे B कॉम्पोनेंट में 1 की बढ़ोतरी होती है.

नीचे दिए गए उदाहरणों की विशेषता (0,1,0) है.

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

.my-class {
  color: red;
}

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

:hover {
  color: red;
}

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

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

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

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

यहां दिए गए उदाहरण में, खास जानकारी (1,0,0) है

#myID {
  color: red;
}

अन्य सिलेक्टर

सीएसएस में कई सिलेक्टर होते हैं. इनमें से कुछ ही सुझाव सटीक होते हैं. उदाहरण के लिए, :not() छद्म क्लास, खास तौर पर कैलकुलेशन में कुछ भी नहीं जोड़ती है.

:not() स्यूडो-क्लास की स्पेसिफ़िसिटी को, सिलेक्टर के कॉमा लगाकर अलग किए गए तर्क में सबसे खास सिलेक्टर की स्पेसिफ़िसिटी से बदल दिया जाता है. इससे स्पेसिफ़िसिटी उतनी ही हो जाती है जितनी :not(:is(argument)) लिखने पर होती.

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

:is() सूडो-क्लास भी, खास जानकारी के हिसाब से स्कोर तय करने में कोई भूमिका नहीं निभाता. :not() की तरह, यह भी अपने सबसे खास आर्ग्युमेंट की खास जानकारी लेता है.

:is(h1, h2, h3) {
  color: blue;
}

इस सैंपल की स्पेसिफ़िसिटी (0,0,1) है, क्योंकि इसमें सिर्फ़ एक तरह का सिलेक्टर (type) है.

id जोड़ने पर, स्पेसिफ़िसिटी (1,0,0) तक बढ़ जाती है.

:is(h1, h2, h3, #my-heading) {
  color: blue;
}

:where() स्यूडो-क्लास अलग है. इसके किसी भी तर्क की स्पेसिफ़िसिटी चाहे जो भी हो, इसकी स्पेसिफ़िसिटी हमेशा (0,0,0) होती है.

:where(h1, h2, h3, #my-heading) {
  color: blue;
}

:where() का इस्तेमाल करके लागू की गई कम स्पेसिफ़िसिटी वाली स्टाइल की मदद से, इन स्टाइल को बाद में अपनी स्टाइल शीट में बुनियादी सिलेक्टर के साथ ओवरराइड किया जा सकता है:

:where(#my-content) {
   color: red;
}

p {
   color: blue;
}

हालांकि, :where() की आर्ग्युमेंट सूची में id है, लेकिन इसकी खास जानकारी अब भी सिर्फ़ (0, 0, 0) है. इसलिए, बुनियादी p सिलेक्टर इसे बदल देता है और टेक्स्ट blue हो जाएगा.

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

स्पेसफ़िसिटी स्कोरिंग के बारे में अपनी जानकारी की जांच करना

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

.my-class {
  color: red !important;
  color: white;
}

.branding {
  color: blue !important;
}

button {
  color: red !important;
}

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

a {
  color: red;
}

a.my-class {
  color: green;
}

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

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

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>

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

button[onclick] {
  background: grey;
}

.my-button {
  background: blue;
}

[onclick] {
  background: grey;
}

[onclick] {
  background: grey;
}

.my-button {
  background: blue;
}