सीएसएस के नए फ़ंक्शनल सूडो-क्लास सिलेक्टर :is() और :where()

सीएसएस सिलेक्टर के सिंटैक्स में दिखने वाले इन छोटे-छोटे बदलावों से बड़ा असर पड़ेगा.

Adam Argyle

सीएसएस लिखते समय, कभी-कभी आपको टारगेट करने के लिए, सिलेक्टर की लंबी सूचियां मिल सकती हैं एक जैसे स्टाइल के नियमों वाले कई एलिमेंट शामिल हैं. उदाहरण के लिए, अगर आपको हेडिंग एलिमेंट में मिले किसी भी <b> टैग में बदलाव करें, तो यह लिखा जा सकता है:

h1 > b, h2 > b, h3 > b, h4 > b, h5 > b, h6 > b {
  color: hotpink;
}

इसके बजाय, :is() का इस्तेमाल करें. इससे कॉन्टेंट को आसानी से पढ़ने में मदद मिलेगी और वीडियो को बड़ा होने से रोका जा सकता है सिलेक्टर:

:is(h1,h2,h3,h4,h5,h6) > b {
  color: hotpink;
}

आसानी से पढ़े जा सकने और छोटे सिलेक्टर की सुविधाएं, :is() और :where() की वैल्यू का सिर्फ़ एक हिस्सा हैं. इस पोस्ट में, आपको इन दो फ़ंक्शनल स्यूडो सिलेक्टर के सिंटैक्स और वैल्यू के बारे में पता चलेगा.

ब्राउज़र के साथ काम करना

:is()

:where()

:is() और :where() से मिलें

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

सिलेक्टर ग्रुपिंग

ग्रुप बनाने के लिए :is() जो भी कर सकता है, :where() भी वही कर सकता है. यह जिसमें सिलेक्टर, नेस्टिंग, और स्टैकिंग में कहीं भी इस्तेमाल किया जा सकता है. हो गया सीएसएस की आपकी पसंद के बारे में जानकारी. यहां कुछ उदाहरण दिए गए हैं:

/* at the beginning */
:where(h1,h2,h3,h4,h5,h6) > b {
  color: hotpink;
}

/* in the middle */
article :is(header,footer) > p {
  color: gray;
}

/* at the end */
.dark-theme :where(button,a) {
  color: rebeccapurple;
}

/* multiple */
:is(.dark-theme, .dim-theme) :where(button,a) {
  color: rebeccapurple;
}

/* stacked */
:is(h1,h2):where(.hero,.subtitle) {
  text-transform: uppercase;
}

/* nested */
.hero:is(h1,h2,:is(.header,.boldest)) {
  font-weight: 900;
}

ऊपर दिए गए सिलेक्टर के हर उदाहरण में, इन दो फ़ंक्शनल स्यूडो-क्लास की सुविधाओं के बारे में बताया गया है. अपने कोड के उन हिस्सों को ढूंढने के लिए जिनमें :is() या :where() का इस्तेमाल फ़ायदेमंद हो सकता है, ऐसे सिलेक्टर ढूंढें जिनमें कई कॉमा और सिलेक्टर दोहराए गए हों.

:is() के साथ आसान और मुश्किल सिलेक्टर का इस्तेमाल करना

सिलेक्टर के बारे में ज़्यादा जानने के लिए, 'जानें'' पर सिलेक्टर मॉड्यूल देखें सीएसएस. यहां आसान और जटिल सिलेक्टर के कुछ उदाहरण दिए गए हैं, ताकि आपको इस सुविधा के बारे में जानकारी मिल सके:

article > :is(p,blockquote) {
  color: black;
}

:is(.dark-theme.hero > h1) {
  font-weight: bold;
}

article:is(.dark-theme:not(main .hero)) {
  font-size: 2rem;
}

अब तक, :is() और :where() को सिंटैक्टिक तौर पर एक-दूसरे की जगह इस्तेमाल किया जा सकता है. अब यह जानने का समय आ गया है कि ये दोनों कैसे अलग हैं.

:is() और :where() के बीच का अंतर

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

कम शब्दों में

• :where() की कोई विशेषता नहीं है.
  :where() सिलेक्टर की सूची को फ़ंक्शनल पैरामीटर के तौर पर पास किया जाता है. यह अपनी तरह की पहली सिलेक्टर सुविधा है.
• :is(), सबसे सटीक सिलेक्टर की सटीक जानकारी लेता है.
  :is(a,div,#id) के पास आईडी का सटीक स्कोर 100 पॉइंट है.

सूची में से सबसे सटीक सिलेक्टर चुनने पर, मुझे सिर्फ़ तब परेशानी हुई, जब मैं ग्रुप बनाने को लेकर बहुत उत्साहित था. मैं हमेशा ये कर सकती थी ज़्यादा जानकारी वाले सिलेक्टर को उसके खुद के सिलेक्टर में ले जाकर, कॉन्टेंट को आसानी से पढ़ने लायक बनाएं जहाँ इसका कोई खास असर नहीं होता. यहां मेरे मतलब का एक उदाहरण दिया गया है:

article > :is(header, #nav) {
  background: white;
}

/* better as */
article > header,
article > #nav {
  background: white;
}

:where() के साथ, मुझे लाइब्रेरी में ऐसे वर्शन देखने को मिलेंगे जिनमें कोई खास जानकारी नहीं होगी. लेखक की स्टाइल और लाइब्रेरी के बीच की खासियत स्टाइल खत्म हो सकती हैं. सीएसएस लिखते समय, किसी खास चीज़ से मुकाबला नहीं करना पड़ता. सीएसएस, ग्रुप बनाने की इस सुविधा पर काफ़ी समय से काम कर रही है. यह सुविधा अब उपलब्ध है, लेकिन अब भी इस पर बहुत काम किया जाना बाकी है. वीडियो बनाने का आनंद लें छोटी स्टाइलशीट और कॉमा को हटा सकती हैं.

Unस्प्लैश पर मार्कस विंकलर की फ़ोटो