सीएसएस के नए फ़ंक्शनल सूडो-क्लास सिलेक्टर :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() का इस्तेमाल करने से पहले और बाद में दिखने वाले अनगिनत विज़ुअल की सुविधा

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

:is()

ब्राउज़र सहायता

• 88
• 88
• 78
• 14

सोर्स

:where()

ब्राउज़र सहायता

• 88
• 88
• 78
• 14

सोर्स

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

ऊपर दिए गए सिलेक्टर के हर उदाहरण में, इन दो फ़ंक्शन वाली pseudo-classes के लचीलापन को दिखाया गया है. अपने कोड के उन हिस्सों को ढूंढने के लिए जिनमें :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() के बीच का अंतर

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

Unsplash पर मार्कस विंकलर की ओर से अपलोड की गई फ़ोटो