नेस्ट करना

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

खास जानकारी

अब जब आपने सलेक्टर के बारे में जान लिया है, तो शायद आपके मन में यह सवाल उठ रहा होगा कि अपनी स्टाइलशीट में उन्हें बेहतर तरीके से व्यवस्थित कैसे किया जाए. मान लें कि आपको अपनी साइट के "सुविधा" सेक्शन में मौजूद आइटम पर स्टाइल लागू करनी हैं. नेस्टिंग की मदद से, इन स्टाइल को .feature नियम के अंदर इस तरह से ग्रुप किया जा सकता है:

.feature {
  button {
    color: blue;
  }

  .link {
    color: red;
  }

  .text {
    font-size: 1.3em;
  }
}

यह हर स्टाइल को अलग-अलग लिखने जैसा ही होगा:

.feature button {
  color: blue;
}

.feature .link {
   color: red;
}

.feature .text {
   font-size: 1.3em;
}

नेस्टिंग को ज़रूरत के हिसाब से कई लेयर तक किया जा सकता है.

.feature {
  .heading {
    color: blue;

    a {
      color: green;
    }
  }
}

ग्रुप बनाना और संबंध जोड़ना

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

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

/* targets headings that are siblings of the .feature element and come immediately after it */
.feature {
  + .heading {
    color: blue;
  }

/* targets all paragraphs that are direct children of the .feature element */
  > p {
    font-size: 1.3em;
  }
}

& सिलेक्टर का इस्तेमाल करके, साफ़ तौर पर संबंध तय करना

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

.feature {
 & button {
    color: blue;
  }
}

यह स्टाइल लिखने के इस तरीके के बराबर होगी:

.feature button {
  color: blue;
}

& कब ज़रूरी है

& के बिना, नेस्ट किए गए सिलेक्टर, पैरंट सिलेक्टर के डिसेंडेंट सिलेक्टर होंगे. कंपाउंड सिलेक्टर बनाने के लिए, & ज़रूरी है.

.feature {
  &:last-child {
    /* Selects the .feature element that is the :last-child, equivalent to .feature:last-child */
  }
   
  & :last-child {
    /* Selects the :last-child inside of a .feature element, equivalent to .feature :last-child */
  }

  &.highlight {
    /* Selects .feature elements that also have a .highlight class, equivalent to .feature.highlight */
  }

  & .highlight {
     /* Selects elements inside of the .feature element with the class .highlight, equivalent to .feature .highlight */
  }
}

आपके पास कॉन्टेक्स्ट बदलने और & सिलेक्टर को चाइल्ड सिलेक्टर के आखिर में या दोनों तरफ़ रखने का विकल्प भी होता है.

/* Targets buttons with an adjacent sibling button */
button {
  & + & {
    /* … */
  }
}

img {
  .my-component & {
    /* styles for images inside of `.my-component` ... */
  }
}

पिछले उदाहरण में, हम .my-component क्लास वाले एलिमेंट में मौजूद इमेज के लिए स्टाइल जोड़ रहे हैं. यह तब काम आ सकता है, जब आपको किसी ऐसे प्रोजेक्ट पर काम करना हो जिसमें किसी एलिमेंट में class या id नहीं जोड़ा जा सकता.

नेस्टिंग और स्पेसिफ़िसिटी

:is() की तरह, नेस्टिंग सिलेक्टर भी पैरंट के सिलेक्टर की सूची में सबसे ज़्यादा स्पेसिफ़िसिटी वाले सिलेक्टर की स्पेसिफ़िसिटी लेता है.

#main-header,
.intro {
  & a {
    color: green;
  }
}

.intro a {
  color: blue;
}

पहला नियम, #main-header और .intro एलिमेंट के अंदर मौजूद सभी लिंक को टारगेट करता है. इससे लिंक का रंग हरा हो जाता है.

दूसरा नियम, इस सेटिंग को बदलने की कोशिश करता है, ताकि .intro एलिमेंट के अंदर मौजूद लिंक नीले रंग के दिखें.

अगर हम हर नियम की बारीकी से जांच करें, तो हमें पता चल सकता है कि यह काम क्यों नहीं करता.

/* equivalent to :is(#main-header, .intro) a with a specificity of (1, 0, 1) */
#main-header,
.intro {
  & a {
    color: green;
  }
}

/* lower specificity of (0, 1, 1) */
.intro a {
  color: blue;
}

पहले नियम की सिलेक्टर सूची में id है. साथ ही, नेस्ट किए गए नियम, सबसे ज़्यादा स्पेसिफ़िसिटी वाले सिलेक्टर की स्पेसिफ़िसिटी लेते हैं. इसलिए, इसकी स्पेसिफ़िसिटी दूसरे नियम से ज़्यादा है. लिंक हरे रंग के होते हैं. ऐसा उन a एलिमेंट के लिए भी होता है जो #main-header सिलेक्टर वाले एलिमेंट के अंदर नहीं होते.

नेस्टिंग अमान्य है

:is() की तरह, नेस्टिंग सिलेक्टर, सूडो एलिमेंट को नहीं दिखा सकता.

blockquote, blockquote::before, blockquote::after {
  color: navy;

  & {
    border: 1px solid navy;
  }
}

आपको लग सकता है कि blockquote और इसके छद्म एलिमेंट, दोनों में navy रंग का टेक्स्ट और बॉर्डर होगा. हालांकि, ऐसा नहीं है. & सिलेक्टर, छद्म-तत्वों को नहीं दिखा सकता. इसलिए, नेस्ट की गई बॉर्डर स्टाइल सिर्फ़ blockquote पर लागू होंगी.

& और टाइप सिलेक्टर का इस्तेमाल करके, कंपाउंड सिलेक्टर बनाते समय, टाइप सिलेक्टर को सबसे पहले रखना होगा. इसके बीच में कोई खाली जगह नहीं होनी चाहिए.

/* valid css nesting */
.feature {
  p& {
    font-weight: bold;
  }
}

/* invalid css nesting */
.feature {
  &p {
    font-weight: bold;
  }
}

इस नियम की मदद से, सीएसएस नेस्टिंग को Sass जैसे प्री-प्रोसेसिंग टूल के साथ इस्तेमाल किया जा सकता है. Sass में, &p लिखने पर पैरंट सिलेक्टर, नेस्ट किए गए टाइप सिलेक्टर में जुड़ जाएगा. इससे नतीजा .featurep होगा.

at-rules को नेस्ट करना

सीएसएस की शर्त के साथ ग्रुप करने के नियमों को भी नेस्ट किया जा सकता है. जैसे, @container, @media, @supports, और @layer.

.feature {
  @media (min-width: 40em) {
    /* ... */
  }

  @container (inline-size > 900px) {
    /* ... */
  }
}

.feature {
  @supports (display: grid) {
    /* ... */
  }
}

.feature {
  @layer component {
    h2 {
      /* ... */
    }
  }
}

देखें कि आपको कितना समझ आया