सीएसएस नेस्टिंग

सीएसएस प्रीप्रोसेसर की हमारी पसंदीदा सुविधाओं में से एक, अब भाषा में शामिल है: नेस्टिंग स्टाइल नियम.

Adam Argyle

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

.nesting {
  color: hotpink;
}

.nesting > .is {
  color: rebeccapurple;
}

.nesting > .is > .awesome {
  color: deeppink;
}

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

.nesting {
  color: hotpink;

  > .is {
    color: rebeccapurple;

    > .awesome {
      color: deeppink;
    }
  }
}

इसे ब्राउज़र में आज़माएं.

नेस्टिंग की मदद से, डेवलपर को सेलेक्टर दोहराने की ज़रूरत नहीं पड़ती. साथ ही, इससे मिलते-जुलते एलिमेंट के लिए स्टाइल नियमों को एक साथ रखा जा सकता है. इससे स्टाइल को टारगेट किए गए एचटीएमएल से मैच करने में भी मदद मिल सकती है. अगर पिछले उदाहरण में .nesting कॉम्पोनेंट को प्रोजेक्ट से हटा दिया गया था, तो मिलते-जुलते सिलेक्टर इंस्टेंस के लिए फ़ाइलों को खोजने के बजाय, पूरे ग्रुप को मिटाया जा सकता है.

नेस्टिंग से इन कामों में मदद मिल सकती है: - संगठन के हिसाब से व्यवस्थित करना - फ़ाइल का साइज़ कम करना - फिर से तैयार करना

नेस्टिंग की सुविधा, Chrome 112 से उपलब्ध है. साथ ही, Safari के तकनीकी रिलीज़ के तौर पर उपलब्ध 162 वर्शन में भी इसे आज़माया जा सकता है.

सीएसएस नेस्टिंग का इस्तेमाल शुरू करना

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

सैंडबॉक्स में सर्कल, ट्राएंगल, और स्क्वेयर हैं. कुछ छोटे, मध्यम या बड़े होते हैं. अन्य रंग नीले, गुलाबी या बैंगनी होते हैं. ये सभी .demo एलिमेंट में मौजूद होते हैं. यहां उन एचटीएमएल एलिमेंट की झलक दी गई है जिन्हें टारगेट किया जाएगा.

<div class="demo">
  <div class="sm triangle pink"></div>
  <div class="sm triangle blue"></div>
  <div class="square blue"></div>
  <div class="sm square pink"></div>
  <div class="sm square blue"></div>
  <div class="circle pink"></div>
  …
</div>

नेस्ट करने के उदाहरण

सीएसएस नेस्टिंग की मदद से, किसी दूसरे सिलेक्टर के संदर्भ में किसी एलिमेंट के लिए स्टाइल तय की जा सकती हैं.

.parent {
  color: blue;

  .child {
    color: red;
  }
}

इस उदाहरण में, .child क्लास सिलेक्टर को .parent क्लास सिलेक्टर में नेस्ट किया गया है. इसका मतलब है कि नेस्ट किया गया .child सिलेक्टर, सिर्फ़ उन एलिमेंट पर लागू होगा जो .parent क्लास वाले एलिमेंट के चाइल्ड हैं.

इस उदाहरण को & सिंबल का इस्तेमाल करके भी लिखा जा सकता है, ताकि साफ़ तौर पर यह पता चल सके कि पैरंट क्लास को कहां रखा जाना चाहिए.

.parent {
  color: blue;

  & .child {
    color: red;
  }
}

ये दोनों उदाहरण, फ़ंक्शन के हिसाब से एक जैसे हैं. इस लेख में ज़्यादा बेहतर उदाहरणों के बारे में बताया गया है. इससे आपको यह समझने में मदद मिलेगी कि आपके पास विकल्प क्यों हैं.

सर्कल चुनना

इस पहले उदाहरण में, डेमो में मौजूद सिर्फ़ सर्कल को फ़ेड और धुंधला करने के लिए स्टाइल जोड़ने का टास्क है.

नेस्टिंग के बिना, आज की सीएसएस:

.demo .circle {
  opacity: .25;
  filter: blur(25px);
}

नेस्टिंग के साथ, दो मान्य तरीके हैं:

/* & is explicitly placed in front of .circle */
.demo {
  & .circle {
    opacity: .25;
    filter: blur(25px);
  }
}

या

/* & + " " space is added for you */
.demo {
  .circle {
    opacity: .25;
    filter: blur(25px);
  }
}

नतीजा, .demo में मौजूद सभी एलिमेंट, .circle क्लास के साथ धुंधले हो जाते हैं और लगभग अदृश्य हो जाते हैं:

किसी भी त्रिकोण और वर्ग को चुनना

इस टास्क के लिए, नेस्ट किए गए कई एलिमेंट चुनने होते हैं. इन्हें ग्रुप सिलेक्टर भी कहा जाता है.

नेस्ट किए बिना, सीएसएस को दो तरीकों से लिखा जा सकता है:

.demo .triangle,
.demo .square {
  opacity: .25;
  filter: blur(25px);
}

इसके अलावा, :is() का इस्तेमाल करके भी ऐसा किया जा सकता है

/* grouped with :is() */
.demo :is(.triangle, .square) {
  opacity: .25;
  filter: blur(25px);
}

नेस्टिंग के साथ, यहां दो मान्य तरीके दिए गए हैं:

.demo {
  & .triangle,
  & .square {
    opacity: .25;
    filter: blur(25px);
  }
}

या

.demo {
  .triangle, .square {
    opacity: .25;
    filter: blur(25px);
  }
}

नतीजा, .demo में सिर्फ़ .circle एलिमेंट बचे हैं:

बड़े त्रिकोण और सर्कल चुनना

इस टास्क के लिए, कंपाउंड सिलेक्टर की ज़रूरत होती है. इसमें, एलिमेंट को चुनने के लिए, दोनों क्लास मौजूद होनी चाहिए.

नेस्टिंग के बिना, आज की सीएसएस:

.demo .lg.triangle,
.demo .lg.square {
  opacity: .25;
  filter: blur(25px);
}

या

.demo .lg:is(.triangle, .circle) {
  opacity: .25;
  filter: blur(25px);
}

नेस्टिंग के साथ, यहां दो मान्य तरीके दिए गए हैं:

.demo {
  .lg.triangle,
  .lg.circle {
    opacity: .25;
    filter: blur(25px);
  }
}

या

.demo {
  .lg {
    &.triangle,
    &.circle {
      opacity: .25;
      filter: blur(25px);
    }
  }
}

नतीजा, सभी बड़े ट्रायंगल और सर्कल .demo के अंदर छिपे हुए हैं:

कंपाउंड सिलेक्टर और नेस्टिंग के बारे में अहम जानकारी

यहां & सिंबल आपके लिए मददगार है, क्योंकि यह नेस्ट किए गए सिलेक्टर को जोड़ने का तरीका साफ़ तौर पर दिखाता है. नीचे दिया गया उदाहरण देखें:

.demo {
  .lg {
    .triangle,
    .circle {
      opacity: .25;
      filter: blur(25px);
    }
  }
}

नेस्ट करने का यह एक मान्य तरीका है. हालांकि, इससे मिलने वाले नतीजे, आपकी उम्मीद के मुताबिक नहीं होंगे. इसकी वजह यह है कि .lg.triangle, .lg.circle के साथ-साथ काम करने वाले & के नतीजे के बारे में बताने के लिए, असल नतीजा .lg .triangle, .lg .circle; डिसेंटेंट सिलेक्टर होगा.

गुलाबी रंग के आकार को छोड़कर, सभी आकार चुनना

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

नेस्टिंग के बिना, आज की सीएसएस:

.demo :not(.pink) {
  opacity: .25;
  filter: blur(25px);
}

नेस्टिंग के साथ, यहां दो मान्य तरीके दिए गए हैं:

.demo {
  :not(.pink) {
    opacity: .25;
    filter: blur(25px);
  }
}

या

.demo {
  & :not(.pink) {
    opacity: .25;
    filter: blur(25px);
  }
}

नतीजा, गुलाबी रंग के अलावा सभी आकार .demo में छिपे हुए हैं:

& की मदद से सटीक और ज़रूरत के हिसाब से विज्ञापन दिखाना

मान लें कि आपको :not() सिलेक्टर की मदद से .demo को टारगेट करना है. & ज़रूरी है, ताकि:

.demo {
  &:not() {
    ...
  }
}

यह .demo और :not() को .demo:not() में बदल देता है. पिछले उदाहरण में, .demo :not() की ज़रूरत थी. :hover इंटरैक्शन को नेस्ट करने के लिए, यह रिमाइंडर बहुत ज़रूरी है.

.demo {
  &:hover {
    /* .demo:hover */
  }

  :hover {
    /* .demo :hover */
  }
}

नेस्ट करने के ज़्यादा उदाहरण

नेस्ट करने के लिए सीएसएस स्पेसिफ़िकेशन में, ज़्यादा उदाहरण दिए गए हैं. अगर आपको उदाहरणों के ज़रिए सिंटैक्स के बारे में ज़्यादा जानना है, तो यहां मान्य और अमान्य उदाहरणों की एक बड़ी सूची दी गई है.

अगले कुछ उदाहरणों में, सीएसएस नेस्टिंग की सुविधा के बारे में कम शब्दों में बताया गया है. इससे आपको इस सुविधा की सभी सुविधाओं को समझने में मदद मिलेगी.

@media को नेस्ट करना

किसी सिलेक्टर और उसकी स्टाइल में बदलाव करने वाली मीडिया क्वेरी की शर्तें ढूंढने के लिए, स्टाइलशीट के किसी दूसरे हिस्से पर जाना बहुत परेशानी भरा हो सकता है. अब आपको शर्तों को कॉन्टेक्स्ट में नेस्ट करने की सुविधा मिल गई है, ताकि आपका ध्यान भटके.

अगर नेस्ट की गई मीडिया क्वेरी, सिर्फ़ मौजूदा सिलेक्टर कॉन्टेक्स्ट के लिए स्टाइल में बदलाव कर रही है, तो सिंटैक्स के लिए कम से कम सिंटैक्स का इस्तेमाल किया जा सकता है.

.card {
  font-size: 1rem;

  @media (width >= 1024px) {
    font-size: 1.25rem;
  }
}

& का इस्तेमाल साफ़ तौर पर इनके लिए भी किया जा सकता है:

.card {
  font-size: 1rem;

  @media (width >= 1024px) {
    &.large {
      font-size: 1.25rem;
    }
  }
}

इस उदाहरण में, & के साथ बड़ा किया गया सिंटैक्स दिखाया गया है. साथ ही, नेस्ट करने की अन्य सुविधाएं काम करती रहेंगी, यह दिखाने के लिए .large कार्ड को टारगेट किया गया है.

@rules को नेस्ट करने के बारे में ज़्यादा जानें.

कहीं भी नेस्ट करना

अब तक दिए गए सभी उदाहरण, पिछले कॉन्टेक्स्ट में जारी हैं या उसमें जोड़े गए हैं. ज़रूरत पड़ने पर, कॉन्टेक्स्ट को पूरी तरह से बदला या फिर से व्यवस्थित किया जा सकता है.

.card {
  .featured & {
    /* .featured .card */
  }
}

& सिंबल, किसी सिलेक्टर ऑब्जेक्ट (न कि स्ट्रिंग) का रेफ़रंस दिखाता है. साथ ही, इसे नेस्ट किए गए सिलेक्टर में कहीं भी रखा जा सकता है. इसे एक से ज़्यादा बार भी डाला जा सकता है:

.card {
  .featured & & & {
    /* .featured .card .card .card */
  }
}

यह उदाहरण थोड़ा बेमतलब लग सकता है, लेकिन कुछ मामलों में, सिलेक्टर कॉन्टेक्स्ट को दोहराना मददगार होता है.

नेस्टिंग के अमान्य उदाहरण

नेस्टिंग सिंटैक्स के कुछ मामले अमान्य होते हैं. अगर आपने प्रीप्रोसेसर में नेस्टिंग की है, तो आपको इनसे आश्चर्य हो सकता है.

नेस्टिंग और स्ट्रिंग जोड़ना

सीएसएस क्लास के नाम तय करने के कई नियमों के मुताबिक, नेस्टिंग की मदद से सिलेक्टर को स्ट्रिंग की तरह जोड़ा या जोड़ा जा सकता है. यह सीएसएस नेस्टिंग में काम नहीं करता, क्योंकि सिलेक्टर स्ट्रिंग नहीं होते, बल्कि वे ऑब्जेक्ट रेफ़रंस होते हैं.

.card {
  &--header {
    /* is not equal to ".card--header" */
  }
}

ज़्यादा जानकारी के लिए, स्पेसिफ़िकेशन देखें.

नेस्टिंग का मुश्किल उदाहरण

चुनने के लिए सूचियों और :is() में नेस्ट करना

नेस्ट किए गए इस CSS ब्लॉक पर ध्यान दें:

.one, #two {
  .three {
    /* some styles */
  }
}

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

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

मुश्किल उदाहरण को साफ़ तौर पर दोहराने के लिए, पिछले नेस्टिंग ब्लॉक को दस्तावेज़ में इस तरह लागू किया जाएगा:

:is(.one, #two) .three {
  /* some styles */
}

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

नेस्टिंग और एलान को मिलाना

नेस्ट किए गए इस CSS ब्लॉक पर ध्यान दें:

.card {
  color: green;
  & { color: blue; }
  color: red;
}

.card एलिमेंट का रंग blue होगा.

एक-दूसरे के साथ इस्तेमाल किए गए स्टाइल एलान, सबसे ऊपर ले जाते हैं. ऐसा लगता है कि उन्हें नेस्टिंग से पहले लिखा गया था. ज़्यादा जानकारी के लिए, स्पेसिफ़िकेशन देखें.

इसके लिए कुछ तरीके हैं. यहां तीन कलर स्टाइल को & में रैप किया गया है. इससे, लेखक के हिसाब से कैस्केड का क्रम बना रहता है. .card एलिमेंट का रंग लाल होगा.

.card {
  color: green;
  & { color: blue; }
  & { color: red; }
}

असल में, नेस्टिंग के बाद आने वाली सभी स्टाइल को & के साथ रैप करना एक अच्छा तरीका है.

.card {
  color: green;

  @media (prefers-color-scheme: dark) {
    color: lightgreen;
  }

  & {
    aspect-ratio: 4/3;
  }
}

फ़ीचर का पता लगाना

सीएसएस नेस्टिंग का पता लगाने के दो बेहतरीन तरीके हैं: नेस्टिंग का इस्तेमाल करें या नेस्टिंग सिलेक्टर को पार्स करने की सुविधा की जांच करने के लिए @supports का इस्तेमाल करें.

नेस्टिंग का इस्तेमाल करना:

html {
  .has-nesting {
    display: block;
  }

  .no-nesting {
    display: none;
  }
}

@supports का इस्तेमाल करके:

@supports (selector(&)) {
  /* nesting parsing available */
}

मेरे सहयोगी Bramus ने इस रणनीति को दिखाने के लिए, शानदार Codepen बनाया है.

Chrome DevTools की मदद से डीबग करना

फ़िलहाल, DevTools में नेस्टिंग के लिए कम से कम सहायता मिलती है. फ़िलहाल, आपको स्टाइल पैनल में स्टाइल, उम्मीद के मुताबिक दिखेंगी. हालांकि, नेस्टिंग और उसके पूरे सिलेक्टर कॉन्टेक्स्ट को ट्रैक करने की सुविधा अभी उपलब्ध नहीं है. हमने इस प्रोसेस को पारदर्शी और साफ़ तौर पर समझाने के लिए, डिज़ाइन और प्लान तैयार किए हैं.

Chrome 113 में, सीएसएस नेस्टिंग के लिए ज़्यादा सहायता देने की योजना है. हमारे साथ बने रहें.

आने वाला समय

सीएसएस नेस्टिंग सिर्फ़ वर्शन 1 में उपलब्ध है. दूसरे वर्शन में, सिंटैक्स शुगर के ज़्यादा विकल्प उपलब्ध होंगे. साथ ही, याद रखने के लिए कम नियम होंगे. नेस्टिंग की पार्सिंग को सीमित न करने या उसमें मुश्किलें न आने की काफ़ी मांग है.

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

आखिर में, यहां एक डेमो दिया गया है, जिसमें @scope, नेस्टिंग, और @layer का एक साथ इस्तेमाल किया गया है. यह बहुत रोमांचक है!