CSS नेस्टिंग
वैरिएबल्स ने आपकी वैल्यूज़ को नाम दिया। calc और साथी ने उन्हें गिना। Nesting उन सिलेक्टर्स को व्यवस्थित करता है जो इन वैल्यूज़ का उपयोग करते हैं: कार्ड का टाइटल, बटन और hover स्टाइल .card के अंदर रखें — फाइल भर में parent नाम दोहराने के बजाय।
चाइल्ड सिलेक्टर नेस्ट करें
एक नियम के अंदर दूसरा नियम लिखें। नेस्टेड class या type सिलेक्टर parent का descendant बनता है (space combinator), जब तक आप & से कुछ और न कहें:
.card {
padding: 1.25rem;
border-radius: 0.75rem;
background: var(--surface, #fff);
.title {
margin: 0 0 0.5rem;
font-size: 1.25rem;
}
.body {
color: var(--muted, #444);
line-height: 1.5;
}
}
ब्राउज़र इसे .card .title और .card .body में फैलाता है। आपको अभी भी सामान्य descendant सिलेक्टर मिलते हैं — nesting संरचना और स्थानीयपन के लिए चीनी है, कोई नया matching मॉडल नहीं।
& parent सिलेक्टर
& तब इस्तेमाल करें जब नेस्टेड नियम parent वाले उसी एलिमेंट से जुड़ना हो — pseudo-classes, pseudo-elements, या parent पर अतिरिक्त class:
.button {
display: inline-flex;
padding: 0.6rem 1.1rem;
border: 0;
border-radius: 0.5rem;
background: var(--brand, #2563eb);
color: #fff;
&:hover {
background: var(--brand-hover, #1d4ed8);
}
&:focus-visible {
outline: 2px solid var(--brand, #2563eb);
outline-offset: 2px;
}
&.is-primary {
background: var(--brand-strong, #1e40af);
}
}
&:hover का मतलब .button:hover है। &.is-primary का मतलब .button.is-primary है। बिना & के नंगा :hover { } नेटिव CSS nesting में अमान्य है — & जुड़ाव को स्पष्ट बनाता है।
& के साथ combinators
जब आपको चाइल्ड, सिबलिंग, या कोई और स्पष्ट लिंक चाहिए — सिर्फ़ descendant space नहीं — तो combinator को & के बाद रखें:
.nav {
display: flex;
gap: 0.75rem;
& > .item {
padding: 0.35rem 0.6rem;
}
& > .item + .item {
border-inline-start: 1px solid #ddd;
}
/* same as nesting .item without & — descendant */
.badge {
font-size: 0.75rem;
}
}
& > .item → .nav > .item। बिना & नेस्टेड .badge → .nav .badge। जानबूझकर चुनें: गलती से गहरे descendants nesting की आम गंध हैं।
कंपोनेंट के साथ @media नेस्ट करें
आप @media जैसी at-rules को style नियम के अंदर नेस्ट कर सकते हैं ताकि breakpoints उसी कंपोनेंट के पास रहें जिसे वे बदलते हैं:
.hero {
padding: 2rem 1.25rem;
h1 {
font-size: clamp(1.75rem, 1.2rem + 2vw, 2.75rem);
}
@media (min-width: 48rem) {
padding: 3rem 2rem;
h1 {
max-width: 20ch;
}
}
}
फैलने पर media query अब भी .hero (और .hero h1) की घोषणाओं को लपेटती है। इसे पहले के Modern Toolkit पाठों के tokens और clamp() से जोड़ें — nesting सिर्फ़ नियमों का स्थान बदलती है।
nesting पैटर्न एक नज़र में
📊 नेटिव nesting चीटशीट
| आप लिखते हैं | मतलब | कब इस्तेमाल करें |
|---|---|---|
.card { .title { } } |
.card .title |
कंपोनेंट के नीचे descendant स्टाइल करें |
.btn { &:hover { } } |
.btn:hover |
उसी एलिमेंट पर pseudo-class |
.btn { &.big { } } |
.btn.big |
उसी एलिमेंट पर अतिरिक्त class |
.nav { & > a { } } |
.nav > a |
स्पष्ट चाइल्ड combinator |
.box { @media (…) { } } |
उस नियम के सिलेक्टर्स तक सीमित media query | breakpoints कंपोनेंट के साथ रखें |
nests को उथला रखें
दो या तीन स्तर आमतौर पर पढ़ने योग्य रहते हैं। गहरे पेड़ Sass टीमों वाली «सिलेक्टर पिरामिड» समस्या वापस लाते हैं: कठिन diffs, ऊँची specificity, और स्टाइल जो सिर्फ़ एक विशाल parent के अंदर समझ में आते हैं। साफ़ कंपोनेंट रूट (.card, .nav) चुनें और स्टेट्स व नज़दीकी चाइल्ड नेस्ट करें — पूरी पेज नहीं।
कंपोनेंट बंडल: tokens + nest + स्टेट्स
एक यथार्थ टुकड़ा पिछले तीन toolkit विचारों को जोड़ता है बिना calc या variables पाठ दोहराए:
.panel {
--panel-pad: 1rem;
padding: var(--panel-pad);
border: 1px solid #e5e7eb;
border-radius: 0.75rem;
.heading {
margin: 0 0 0.5rem;
font-weight: 600;
}
.actions {
display: flex;
gap: calc(var(--panel-pad) / 2);
margin-block-start: var(--panel-pad);
}
&.is-compact {
--panel-pad: 0.5rem;
}
@media (max-width: 36rem) {
.actions {
flex-direction: column;
}
}
}
Tokens अभी भी custom properties हैं; calc अभी भी गैप निकालता है; nesting heading, actions, कॉम्पैक्ट स्टेट और छोटे स्क्रीन ट्वीक को एक जगह रखती है।
खुद आज़माएँ
- फ्लैट नियम
.card {},.card .title {},.card .meta {}लें और उन्हें.cardके नीचे nesting से फिर लिखें। .linkपर&:hoverजोड़ें ताकि सिर्फ़ लिंक (नेस्टेड span नहीं) रंग बदले।.sidebarके अंदर@media (min-width: 40rem)नेस्ट करके padding चौड़ा करें — DevTools में फैले सिलेक्टर जाँचें।- ग़लत नेस्टेड
:hover { }(बिना&) को&:hover { }में बदलें और देखें कि यह मान्य हो जाता है। - अव्यवस्थित तीन-स्तरीय nest को दो स्तर तक सीमित करें — भीतरी ब्लॉक को अपनी class पर उठाकर।
आम गलतियाँ
- बिना
&के नेस्टेड:hover { }— अमान्य या इरादा नहीं;&:hoverइस्तेमाल करें - उम्मीद कि नंगा
.childमतलब.parent.child— उसके लिए&.childचाहिए - Sass के
&__elementBEM हैक आँख मूँदकर कॉपी करना — नेटिव nesting CSS सिलेक्टर व्याकरण का पालन करती है - पाँच स्तर नेस्ट करना «क्योंकि हो सकता है» — पठनीयता और specificity नुकसान उठाते हैं
- सोचना कि nesting
var()याcalc()की जगह लेती है — यह सिर्फ़ सिलेक्टर और at-rules समूहित करती है
सारांश
- चाइल्ड सिलेक्टर नेस्ट करें ताकि कंपोनेंट स्टाइल स्थानीय रहें; डिफ़ॉल्ट में वे descendants में फैलते हैं
- उसी एलिमेंट के स्टेट्स (
:hover,.is-active) और स्पष्ट combinators के लिए&इस्तेमाल करें - जिस कंपोनेंट को ट्यून कर रहे हैं उसके पास
@mediaनेस्ट करें - nests उथले रखें; nesting संरचना है, टोकन या गणित सुविधा नहीं
- Modern Toolkit में अगला: container queries — सिर्फ़ viewport नहीं, parent आकार से स्टाइल
🧠 अपने ज्ञान की परीक्षा करें
अपने ज्ञान की परीक्षा करें
इस इंटरैक्टिव क्विज़ के साथ अपनी चुनौती लें और देखें कि आप विषय को कितनी अच्छी तरह समझते हैं
📝 निर्देश
- हर प्रश्न को ध्यान से पढ़ें
- हर प्रश्न के लिए सबसे अच्छा उत्तर चुनें
- आप जितनी बार चाहें क्विज़ दोबारा दे सकते हैं
- आपकी प्रगति शीर्ष पर दिखाई जाएगी