लोड हो रहा है...

एडजेसेंट सिब्लिंग कॉम्बिनेटर

CSS में एडजेसेंट सिब्लिंग कॉम्बिनेटर (+) एक शक्तिशाली सेलेक्टर होता है जो किसी तत्व के ठीक बाद वाले भाई-बहन तत्व को लक्षित करता है। जब भी हमें केवल उस HTML एलिमेंट को स्टाइल करना हो जो किसी अन्य एलिमेंट के तुरंत बाद आता है, तब यह बहुत उपयोगी होता है।
इसे समझने के लिए एक रूपक लें: जैसे आप एक लाइब्रेरी में किताबें व्यवस्थित कर रहे हैं, और आपको केवल उस किताब पर लेबल लगाना है जो किसी विशेष किताब के ठीक बगल में रखी हो – न उससे पहले, न उससे आगे की कोई। ठीक उसी तरह, + कॉम्बिनेटर CSS में उसी एक एलिमेंट को लक्षित करता है जो किसी और के ठीक बाद आता है।
इसका उपयोग विभिन्न वेबसाइटों में अलग-अलग तरह से किया जा सकता है:

Portfolio website में किसी प्रोजेक्ट टाइटल के तुरंत बाद उसका विवरण दिखाने के लिए
Blog में हेडिंग के ठीक बाद का पैराग्राफ हाईलाइट करने के लिए
E-commerce साइट में डिस्काउंट लेबल के बाद कीमत स्टाइल करने के लिए
News site में शीर्षक के बाद की तारीख या कैप्शन को अलग दिखाने के लिए
Social platforms में पोस्ट के बाद लाइक/शेयर बटन को अलग दिखाने के लिए
इस ट्यूटोरियल में आप सीखेंगे:
एडजेसेंट सिब्लिंग कॉम्बिनेटर क्या होता है और कैसे काम करता है
इसे कहां-कहां और कैसे इस्तेमाल किया जा सकता है
कोड उदाहरणों और उपयोग मामलों के साथ
बेस्ट प्रैक्टिस और आम गलतियाँ

मूल उदाहरण

css

CSS Code

/* Style the paragraph that comes immediately after an h3 heading */
h3 + p {
font-size: 1.2rem;        // Slightly larger for emphasis
color: #333;              // Darker text color
border-left: 3px solid #0d6efd;  // Blue vertical line
padding-left: 10px;
margin-top: 0;
}

इस कोड में, हम एक ऐसे <p> टैग को टारगेट कर रहे हैं जो किसी <h3> टैग के ठीक बाद आता है।

h3 + p: यह सेलेक्टर सुनिश्चित करता है कि केवल वही <p> एलिमेंट स्टाइल हो जो किसी <h3> के तुरंत बाद हो। यदि <h3> और <p> के बीच कोई अन्य एलिमेंट (जैसे <div> या यहाँ तक कि एक टेक्स्ट नोड) आ गया, तो यह स्टाइल लागू नहीं होगा।
font-size: 1.2rem;: पैराग्राफ को मुख्य हेडिंग से थोड़ा बड़ा दिखाने के लिए उपयोग किया गया है।
color: #333;: यह गहरा ग्रे रंग पाठ्य को आसानी से पढ़ने योग्य बनाता है।
border-left और padding-left: यह लेफ्ट साइड में एक नीली पट्टी दिखाता है, जिससे उपयोगकर्ता की नजर तुरंत इस पैराग्राफ पर जाए।
margin-top: 0;: अनावश्यक ऊपरी स्पेस को हटाने के लिए।
यह उपयोगकर्ता अनुभव को बेहतर बनाता है, विशेषकर जब आपको हेडिंग के बाद का टेक्स्ट अलग और स्पष्ट दिखाना होता है – जैसे किसी न्यूज़ आर्टिकल या ब्लॉग में इंट्रोडक्शन पैराग्राफ को अलग दिखाना।

व्यावहारिक उदाहरण

css

CSS Code

/* Highlight the discount price immediately after the discount label */
.discount-label + .price {
color: #dc3545;       // Bootstrap Danger red
font-weight: bold;
font-size: 1.5rem;
margin-left: 8px;
display: inline-block;
}

यह कोड एक e-commerce वेबसाइट के लिए उपयुक्त उदाहरण है जहाँ हम .discount-label के तुरंत बाद दिखने वाली .price को स्टाइल कर रहे हैं।

.discount-label + .price: केवल वही .price एलिमेंट प्रभावित होगा जो .discount-label के ठीक बाद आता है। यदि दोनों के बीच कोई अन्य एलिमेंट होगा, तो यह सेलेक्टर लागू नहीं होगा।
color: #dc3545;: यह रेड कलर उपयोगकर्ता का ध्यान कीमत पर केंद्रित करता है।
font-weight और font-size: कीमत को बोल्ड और बड़ी बनाता है जिससे वह हाइलाइट हो जाए।
margin-left और display: इन्हें एक पंक्ति में रखते हुए पर्याप्त स्पेस प्रदान करता है।
यह पैटर्न अक्सर बिक्री टैग और कीमत के संयोजन में प्रयोग होता है, जिससे यूज़र इंटरफेस साफ, प्रभावी और मोबाइल फ्रेंडली बनता है।

Best Practices:

मोबाइल-फर्स्ट डिज़ाइन: सुनिश्चित करें कि एडजेसेंट सिब्लिंग लॉजिक responsive design में भी सही कार्य करे।
क्लास आधारित चयन: क्लास या semantic selectors का उपयोग करें न कि generic div + div जैसा selector।
उचित nesting रखें: DOM स्ट्रक्चर ऐसा रखें कि टारगेट एलिमेंट वास्तव में desired एलिमेंट के ठीक बाद हो।
मॉड्यूलर CSS: कॉम्बिनेटर को कॉम्पोनेंट-बेस्ड CSS में सीमित रखें।
Common Mistakes:
~ और + में भ्रम: + केवल पहले सिब्लिंग पर लागू होता है, ~ सभी बाद वाले सिब्लिंग पर।
गलत nesting: बीच में कोई अतिरिक्त एलिमेंट होने पर सेलेक्टर काम नहीं करता।
स्पेसिफिसिटी कन्फ्लिक्ट्स: ज़्यादा specific selectors आपके CSS को ओवरराइड कर सकते हैं।
बिना टेस्ट के प्रयोग: बिना HTML संरचना देखे + का प्रयोग करना खतरनाक हो सकता है।
Debug Tip: DevTools का प्रयोग करें और अपने DOM को structure-wise inspect करें।

📊 त्वरित संदर्भ

Property/Method	Description	Example
* (एडजेसेंट सिब्लिंग)	सीधे अगले एलिमेंट को टारगेट करता है	h3 + p
font-size	पाठ का आकार बदलना	font-size: 1.2rem
color	टेक्स्ट का रंग सेट करना	color: #333
border-left	बाएं साइड एक बॉर्डर बनाना	border-left: 3px solid #0d6efd
display	एलिमेंट का लेआउट मोड सेट करना	display: inline-block
margin-left	दो एलिमेंट्स के बीच दूरी	margin-left: 8px

सारांश और अगले चरण:
एडजेसेंट सिब्लिंग कॉम्बिनेटर (+) आपको HTML स्ट्रक्चर को ध्यान में रखकर बेहद सटीक CSS लागू करने की सुविधा देता है। आपने सीखा कि यह कॉम्बिनेटर केवल उसी एलिमेंट पर लागू होता है जो किसी एलिमेंट के ठीक बाद आता है – यह वेबसाइट लेआउट, यूआई डिज़ाइन और यूज़र इंटरएक्शन के लिए बेहद उपयोगी है।
यह HTML और JavaScript में DOM संरचना के साथ गहराई से जुड़ा हुआ है, खासकर जब JS से डायनामिक एलिमेंट्स जोड़े जाते हैं। आगे आप इन टॉपिक्स को गहराई से पढ़ सकते हैं:

जनरल सिब्लिंग कॉम्बिनेटर (~)
Pseudo-classes (:first-child, :nth-child आदि)
CSS ग्रिड और Flexbox के संयोजन
JavaScript से DOM मैनिपुलेशन और CSS क्लास टॉगलिंग
अपने CSS कौशल को मजबूत करते हुए आप वेबसाइट को अधिक मॉड्यूलर, मेन्टेनेबल और रिस्पॉन्सिव बना सकते हैं।

🧠 अपने ज्ञान की परीक्षा करें

शुरू करने के लिए तैयार

अपना ज्ञान परखें

व्यावहारिक प्रश्नों के साथ इस विषय की अपनी समझ का परीक्षण करें।

❓

प्रश्न

🎯

70%

पास करने के लिए

♾️

∞

समय

🔄

∞

प्रयास

📝 निर्देश

हर प्रश्न को ध्यान से पढ़ें
हर प्रश्न के लिए सबसे अच्छा उत्तर चुनें
आप जितनी बार चाहें क्विज़ दोबारा दे सकते हैं
आपकी प्रगति शीर्ष पर दिखाई जाएगी

भाषा