हमारी पसंदीदा सीएसएस प्रीप्रोसेसर सुविधाओं में से एक अब भाषा में बिल्ट-इन है: नेस्टिंग स्टाइल रूल.
नेस्ट करने से पहले, हर सिलेक्टर के बारे में साफ़ तौर पर जानकारी देना ज़रूरी होता है, ताकि वह एक-दूसरे से अलग हो सके. इससे दोहराव, स्टाइलशीट बड़ी संख्या में हो जाते हैं, और ऑथरिंग का अनुभव भी कम हो जाता है.
.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 में आज़माएं के लिए उपलब्ध है.
सीएसएस Nesting का इस्तेमाल शुरू करना
इस पूरे पोस्ट के बाकी बचे हिस्से में, नीचे दिए गए डेमो सैंडबॉक्स का इस्तेमाल, चुने गए विकल्पों को विज़ुअलाइज़ करने में किया गया है. इस डिफ़ॉल्ट स्थिति में, कुछ भी नहीं चुना जाता और सब कुछ दिखता है. अलग-अलग शेप और साइज़ चुनकर, सिंटैक्स का अभ्यास किया जा सकता है. साथ ही, उसका इस्तेमाल भी किया जा सकता है.
सैंडबॉक्स के अंदर वृत्त, त्रिकोण, और वर्ग होते हैं. कुछ छोटे, मध्यम या बड़े
हैं. अन्य नीले, गुलाबी या बैंगनी रंग के होते हैं. ये सभी .demo वाले एलिमेंट के अंदर होते हैं. नीचे उन HTML एलिमेंट की झलक दी गई है जिन्हें आप टारगेट
करेंगे.
<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() में नेस्ट करना
नीचे दिए गए नेस्टिंग सीएसएस ब्लॉक पर विचार करें:
.one, #two {
.three {
/* some styles */
}
}
यह पहला उदाहरण है, जो सिलेक्टर सूची से शुरू होता है और फिर आगे नेस्ट होता है. पिछले उदाहरण सिर्फ़ सिलेक्टर की सूची के साथ खत्म हुए थे. नेस्टिंग के इस उदाहरण में कुछ भी अमान्य नहीं है. हालांकि, सिलेक्टर सूचियों में नेस्ट करने के बारे में एक मुश्किल तरीका अपनाया गया है, खास तौर पर उन सूचियों में जिनमें आईडी सिलेक्टर शामिल है.
नेस्टिंग के काम करने के मकसद से, सिलेक्टर की ऐसी सूची जो सबसे ज़्यादा नेस्ट न की गई हो, उसे ब्राउज़र :is() के साथ रैप कर देता है. यह रैपिंग, चुने गए कॉन्टेक्स्ट में सिलेक्टर सूची का ग्रुप बनाए रखती है. इस ग्रुप :is(.one, #two) का खराब असर यह है कि यह ब्रैकेट के अंदर सबसे ज़्यादा स्कोर की खासियत को अपना लेता है. :is() हमेशा इसी तरह काम करता है. हालांकि, नेस्ट करने के सिंटैक्स का इस्तेमाल करने पर आपको हैरानी हो सकती है, क्योंकि इसे ठीक से नहीं लिखा गया है. इस ट्रिक की खास जानकारी दी गई है. आईडी और सिलेक्टर की सूचियों के साथ नेस्ट करने से, चुनने वालों की संख्या बहुत ज़्यादा हो सकती है.
मुश्किल उदाहरण को साफ़ तौर पर समझने के लिए, दस्तावेज़ पर पिछला नेस्टिंग ब्लॉक इस तरह से लागू किया जाएगा:
:is(.one, #two) .three {
/* some styles */
}
आईडी सिलेक्टर का इस्तेमाल करने वाली सिलेक्टर की सूची में नेस्ट करते समय, इस बात पर ध्यान दें या अपने लिंटर को चेतावनी दें कि उस सूची में सभी नेस्टिंग की खासियत ज़्यादा होगी.
नेस्टिंग और एलानों को मिलाना
नीचे दिए गए नेस्टिंग सीएसएस ब्लॉक पर विचार करें:
.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 में सीएसएस नेस्टिंग के लिए अतिरिक्त सहायता मिलने की योजना है. हमारे साथ बने रहें.
आने वाला समय
सीएसएस Nesting सिर्फ़ वर्शन 1 पर उपलब्ध है. वर्शन 2 में ज़्यादा वाक्यात्मक चीनी और शायद कम नियम शामिल होंगे. नेस्टिंग की पार्सिंग की मांग बहुत ज़्यादा है, जो सीमित न हो या मुश्किल पल हो.
नेस्ट करने की सुविधा से, सीएसएस भाषा को और बेहतर बनाया गया है. इसका सीएसएस के करीब-करीब हर तरह के वास्तुकला पर असर पड़ता है. इस बड़े असर को गहराई से समझने और समझने की ज़रूरत है, ताकि वर्शन 2 को असरदार ढंग से तय किया जा सके.
आखिर में, यहां एक डेमो दिया गया है. इसमें @scope, नेस्टिंग, और @layer को एक साथ इस्तेमाल किया गया है. यह सब बहुत ही रोमांचक है!
