CSS कॉम्बिनेटर
टाइप, class और id सिलेक्टर आप जानते हैं। एक ज़रूरी हुनर बाकी है: कभी आप «सभी पैराग्राफ़» नहीं चाहते; चाहते हैं वे पैराग्राफ़ जो किसी सेक्शन के अंदर हों, या सूची के सीधे बच्चे, या ठीक शीर्षक के तुरंत बाद आए हों। यही काम कॉम्बिनेटर करता है।
कॉम्बिनेटर का मतलब क्या?
कॉम्बिनेटर एक चिह्न है — या सिर्फ़ एक स्पेस — जो दो सिलेक्टरों के बीच बैठता है। ब्राउज़र को बताता है कि HTML पेड़ में इन दोनों का क्या रिश्ता होना चाहिए। बाईं ओर आमतौर पर «संदर्भ» है; दाहिनी ओर वही है जो सच में रंग और फ़ॉन्ट पाता है।
चार आम कॉम्बिनेटर
पहले चिह्न याद करें; फिर छोटे उदाहरण से हर एक को महसूस करें।
📊 CSS कॉम्बिनेटर
| नाम | चिह्न | सरल अर्थ | उदाहरण |
|---|---|---|---|
| वंशज | स्पेस | पूर्वज के अंदर कहीं भी, गहराई कोई भी | article p |
| सीधा बच्चा | > |
सिर्फ़ एक स्तर नीचे | ul > li |
| निकट भाई | + |
अगला चिपका हुआ पड़ोसी | h2 + p |
| सामान्य भाई | ~ |
उसी स्तर का कोई भी बाद वाला भाई | h2 ~ p |
वंशज — दो सिलेक्टरों के बीच स्पेस
अगर आप article p लिखें तो मतलब: हर <p> जो <article> के अंदर कहीं भी हो, चाहे कितना नेस्टेड हो। पोते-पड़पोते भी गिने जाते हैं।
वंशज — article के अंदर पैराग्राफ़
cssarticle p {
color: #334155;
line-height: 1.6;
}वंशज कब अच्छा है?
जब आप «इस इलाक़े के सारे टेक्स्ट» के लिए एक जैसा रूप चाहते हों: लेख के पैराग्राफ़, मेनू के लिंक। अगर नेस्टिंग ज़्यादा है और स्टाइल बिना इरादे फैल जाए, तो > की ओर जाएँ।
सीधा बच्चा — >
> से आप सिर्फ़ एक स्तर नीचे लेते हैं। जो दो स्तर गहरा हो, वह इस नियम से बाहर रह जाता है।
सीधा बच्चा — सूची के सिर्फ़ पहले स्तर के आइटम
css.menu > li {
list-style: none;
padding: 0.5rem 1rem;
}एक मानसिक उदाहरण
मान लीजिए मेनू में बाहरी <li> है और उसके अंदर नेस्टेड सूची। .menu > li से सिर्फ़ बाहरी स्टाइल होते हैं। अगर .menu li (स्पेस के साथ) लिखें, तो नेस्टेड भी रंग लेते हैं — कभी ठीक, कभी आपदा।
निकट भाई — +
+ का मतलब: वह तत्व जो संदर्भ के ठीक चिपका बाद आए, उसी पैरेंट के नीचे, बीच में कुछ न हो।
निकट भाई — शीर्षक के बाद पहला पैराग्राफ़
cssh2 + p {
font-size: 1.125rem;
color: #0f766e;
}आम पैटर्न
कई पेज चाहते हैं कि शीर्षक के बाद का पहला वाक्य थोड़ा अलग दिखे। h2 + p से वही पड़ोसी मिल जाता है; हर पैराग्राफ़ पर अलग class चिपकाने की ज़रूरत नहीं।
सामान्य भाई — ~
~ भी भाई चाहता है, पर सिर्फ़ चिपका पड़ोसी नहीं: हर बाद वाला भाई जो दूसरे सिलेक्टर से मेल खाए।
सामान्य भाई — शीर्षक के बाद के पैराग्राफ़
cssh2 ~ p {
max-width: 40rem;
}+ और ~ का फ़र्क एक वाक्य में
h2 + p→ सिर्फ़h2के ठीक बाद चिपका पैराग्राफ़h2 ~ p→ हर भाईpजो उसh2के बाद आए
अगर शीर्षक और पैराग्राफ़ के बीचdivबैठ जाए, तो उस पैराग्राफ़ के लिए+काम नहीं करता;~बाद के भाई पैराग्राफ़ अभी भी ले सकता है।
किसे चुनें?
- इस तरह के सारे तत्व एक इलाक़े में → वंशज (स्पेस)
- नेस्टिंग से अतिरिक्त स्टाइल आ जाए → सीधा बच्चा (
>) - सिर्फ़ एक कदम का पड़ोसी (शीर्षक → पहला पैराग्राफ़) →
+ - निशान के बाद कई भाई, साझा रूप →
~
चेन छोटी रखें। बहुत लंबा सिलेक्टर HTML बदलते ही जल्दी टूटता है।
खुद आज़माएँ
- एक
<article>बनाएँ जिसमें<h2>, एक<p>, अंदर<p>वाला<div>, औरdivके बाद एक और<p>हो। - नियम
article p { color: #334155; }लगाएँ — article के दोनों पैराग्राफ़ रंग लें। - इसे
article > p { color: #0f766e; }में बदलें — सिर्फ़ सीधे बच्चे;divके अंदर काpनहीं। h2 + p { font-weight: bold; }जोड़ें — सिर्फ़ शीर्षक से चिपका पैराग्राफ़ बोल्ड हो।- चाहें तो:
h2 ~ p { max-width: 36rem; }भी देखें — शीर्षक के बाद के सारे भाई पैराग्राफ़।
आम गलतियाँ
- जहाँ सीधा बच्चा चाहिए था वहाँ वंशज — नेस्टेड विजेट भी स्टाइल ले लेता है
- सोचना कि
h2 + pबीच के तत्व पर से «कूद» जाता है — नहीं कूदता; निकट मतलब चिपका - कॉम्बिनेटर उलटा पढ़ना — स्टाइल दाईं ओर पहुँचता है
- कॉम्बिनेटर की जगह कॉमा (
h2, pमतलब «शीर्षक और पैराग्राफ़ दोनों», न कि «शीर्षक के बाद पैराग्राफ़») ~को «चिपका पड़ोसी» समझना —~मतलब उसी स्तर पर बाद में, ज़रूरी नहीं अगला दरवाज़ा
सार
- कॉम्बिनेटर HTML में दो सिलेक्टरों का रिश्ता तय करता है
- स्पेस = वंशज (कोई भी गहराई);
>= सिर्फ़ सीधा बच्चा += चिपका भाई;~= कोई भी बाद वाला भाई- स्टाइल दाएँ सिलेक्टर पर लगता है
- सबसे तंग चिह्न चुनें जो अभी भी आपका मतलब कहे
- छोटे पेज पर स्पेस को
>से और+को~से बदलकर नतीजा देखें
🧠 अपने ज्ञान की परीक्षा करें
अपने ज्ञान की परीक्षा करें
इस इंटरैक्टिव क्विज़ के साथ अपनी चुनौती लें और देखें कि आप विषय को कितनी अच्छी तरह समझते हैं
📝 निर्देश
- हर प्रश्न को ध्यान से पढ़ें
- हर प्रश्न के लिए सबसे अच्छा उत्तर चुनें
- आप जितनी बार चाहें क्विज़ दोबारा दे सकते हैं
- आपकी प्रगति शीर्ष पर दिखाई जाएगी