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

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

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

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

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 */
}

मेरे सहकर्मी ब्रामस के पास यह रणनीति दिखाने वाला एक बेहतरीन कोडपेन है.

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

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

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

आने वाला समय

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

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

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