खासियत

सीएसएस पॉडकास्ट - 003: खास जानकारी

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

<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 की ज़्यादा वैल्यू वाली खास जानकारी ज़्यादा सटीक होगी; अगर सभी वैल्यू बराबर हों, तो दोनों खास जानकारी बराबर होंगी.

उदाहरण के लिए, (1,0,0) को (0,4,3) से ज़्यादा सटीक माना जाता है, क्योंकि (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;
}

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

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

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

#myID {
  color: red;
}

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

सीएसएस में कई सिलेक्टर होते हैं. इनमें से सभी एट्रिब्यूट, ज़्यादा जानकारी नहीं देते. उदाहरण के लिए, :not() स्यूडो-क्लास, सटीक जानकारी के हिसाब से कैलकुलेट नहीं की जाती.

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

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

इस सैंपल में (0,1,1) का इस्तेमाल किया गया है, क्योंकि इसमें :not() में एक टाइप सिलेक्टर (div) और एक क्लास है.

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

खास जानकारी देने के आधार पर स्कोर करने की सुविधा के बारे में अपनी जानकारी की जांच करें

ऐसे फ़ैक्टर जिनका सटीक जानकारी पर कोई असर नहीं पड़ता

सटीक जानकारी देने पर असर डालने वाले इन फ़ैक्टर के बारे में कुछ आम गलतफ़हमियां हैं.

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

सीएसएस को सीधे किसी एलिमेंट के style एट्रिब्यूट पर लागू करने से, खास जानकारी पर कोई असर नहीं पड़ता. ऐसा इसलिए, क्योंकि यह कैस्केड में एक अलग चरण है. इसका आकलन, खास जानकारी से पहले किया जाता है.

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

किसी स्टाइल शीट में इस एलान को बदलने के लिए, कैस्केड के किसी पिछले चरण में एलान को लागू करना होगा.

उदाहरण के लिए, इसमें !important जोड़ा जा सकता है, ताकि यह लेखक के !important ऑरिजिन का हिस्सा बन जाए.

!important एलान

सीएसएस एलान के आखिर में !important होने से, एलान की खास जानकारी पर कोई असर नहीं पड़ता. हालांकि, एलान को किसी दूसरे ऑरिजिन में डाल दिया जाता है. जैसे, लेखक का !important.

नीचे दिए गए उदाहरण में, .my-class के बारे में खास जानकारी, !important के एलान के जीतने के लिए ज़रूरी नहीं है.

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

जब दो एलान !important होते हैं, तो फिर से खास जानकारी का इस्तेमाल किया जाता है, क्योंकि कैस्केड के ऑरिजिन चरण से अब तक यह तय नहीं हो पाया था कि कौनसा एलान विजेता है.

.branding {
  color: blue !important;
}

button {
  color: red !important;
}

कॉन्टेक्स्ट में खास जानकारी

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

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

इस लिंक में दो क्लास हैं. नीचे दी गई सीएसएस में मौजूद नियम में (0,0,1) की खास जानकारी है:

a {
  color: red;
}

अगर सिलेक्टर में किसी क्लास का रेफ़रंस दिया जाता है, तो अब उसमें (0,1,1) की खास जानकारी शामिल हो जाती है:

a.my-class {
  color: green;
}

चुनने वाले टूल में दूसरी क्लास जोड़ें, अब इसमें (0,2,1) की खास जानकारी है:

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

सिलेक्टर में href एट्रिब्यूट जोड़ें, अब इसमें (0,3,1) की खास जानकारी है:

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

आखिर में,इन सभी में :hover स्यूडो-क्लास जोड़ें, सिलेक्टर (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>

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

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

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

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

button[onclick] {
  background: grey;
}

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

अगर दोनों डोमेन के लिए, खास जानकारी एक जैसी है, तो कैस्केड के अगले चरण पर जाएं

अभी बटन के उदाहरण पर ही बने रहें और सीएसएस को इस पर स्विच करें:

.my-button {
  background: blue;
}

[onclick] {
  background: grey;
}

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

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

[onclick] {
  background: grey;
}

.my-button {
  background: blue;
}

ऐसा इसलिए है, क्योंकि दोनों सिलेक्टर की खास बात एक ही है. इस मामले में, कैस्केड दिखने के क्रम के चरण पर वापस आ जाता है.

संसाधन

• सीएसएस की खास बातें
• स्पेसिफ़िकिटी कैलकुलेटर
• MDN के बारे में खास जानकारी
• सीएसएस के बारे में खास जानकारी
• स्पेसिफ़िकिटी कैलकुलेटर का दूसरा उदाहरण