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

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

Adam Argyle

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

.nesting {
  color: hotpink;
}

.nesting > .is {
  color: rebeccapurple;
}

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

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

.nesting {
  color: hotpink;

  > .is {
    color: rebeccapurple;

    > .awesome {
      color: deeppink;
    }
  }
}

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

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

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

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

CSS Nesting का इस्तेमाल शुरू करना

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

सैंडबॉक्स में सर्कल, ट्राएंगल, और स्क्वेयर हैं. कुछ छोटे, मध्यम या बड़े होते हैं. अन्य रंग नीले, गुलाबी या बैंगनी होते हैं. वे सभी .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);
  }
}

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

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

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

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

.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 कार्ड को टारगेट किया गया है.

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

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

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

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

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

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