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

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

Adam Argyle

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

.nesting {
  color: hotpink;
}

.nesting > .is {
  color: rebeccapurple;
}

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

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

.nesting {
  color: hotpink;

  > .is {
    color: rebeccapurple;

    > .awesome {
      color: deeppink;
    }
  }
}

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

Nest की मदद से डेवलपर को, चुनने का बार-बार इस्तेमाल करने की ज़रूरत कम हो जाती है. साथ ही, मिलते-जुलते एलिमेंट के लिए, स्टाइल के नियमों का एक साथ पता लगाना. इसकी मदद से स्टाइल भी HTML को टारगेट किया जा रहा है. अगर पिछले उदाहरण में, .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);
  }
}

नतीजा, .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 को टारगेट करने के साथ-साथ & के साथ बड़ा किया गया सिंटैक्स दिखाया गया है कार्ड की मदद से यह दिखाया जा सकता है कि नेस्टिंग की अन्य सुविधाएं काम कर रही हैं.

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

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

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

.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 के पास यह रणनीति दिखाने वाला एक बेहतरीन कोडपेन है.

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

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

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

आने वाला समय

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

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

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