6. Combinator (Sub) Selector

Combinator Selectors का उपयोग HTML elements को उनके relationship (आपसी संबंध) के आधार पर select करने के लिए किया जाता है। जब हमें किसी element को केवल उसके नाम के आधार पर नहीं, बल्कि यह देखकर select करना हो कि वह किसी दूसरे element के अंदर है, उसका direct child है या उसके साथ sibling relationship रखता है, तब Combinator Selector का उपयोग किया जाता है। CSS में मुख्य रूप से 4 types of Combinators होते हैं: Descendant Selector, Child Selector, Adjacent Sibling Selector और General Sibling Selector।

1. Descendant Selector (Space)

Descendant Selector किसी specified element के अंदर मौजूद सभी matching elements को select करता है, चाहे वे directly अंदर हों या कई levels deep nested हों। इसमें दोनों selectors के बीच केवल space ( ) का उपयोग किया जाता है। इसका मतलब है कि यदि एक <p> element किसी <div> के अंदर कहीं भी मौजूद है, तो div p उस <p> को select करेगा, चाहे वह <div> का direct child हो या किसी दूसरे element के अंदर nested हो।

Syntax:

div p {
  color: blue;
}

Example:

<div>
  <p>This paragraph is blue.</p>
  <section>
    <p>This paragraph is also blue.</p>
  </section>
</div>

यहाँ div p लिखा गया है। इसलिए <div> के अंदर मौजूद दोनों <p> elements select होंगे। पहला <p> direct child है और दूसरा <p> <section> के अंदर nested है, फिर भी दोनों पर color: blue apply होगा। इसलिए याद रखें: Descendant Selector = अंदर कहीं भी मौजूद matching element को select करना।

2. Child Selector (>)

Child Selector केवल specified element के direct child (सीधे बच्चे) को select करता है। यह उन elements को select नहीं करता जो किसी दूसरे element के अंदर further nested हों। इसे represent करने के लिए greater-than sign (>) का उपयोग किया जाता है।

Syntax:

div > p {
  color: red;
}

Example:

<div>
  <p>This paragraph is red (direct child).</p>
  <section>
    <p>This paragraph is not affected.</p>
  </section>
</div>

यहाँ div > p का मतलब है कि केवल वही <p> select होगा जो <div> का direct child है। दूसरा <p> <section> के अंदर है, इसलिए वह <div> का direct child नहीं है और उस पर CSS apply नहीं होगी। यही Descendant और Child Selector के बीच मुख्य difference है: div p अंदर मौजूद सभी matching <p> को select करेगा, जबकि div > p केवल direct <p> को select करेगा।

3. Adjacent Sibling Selector (+)

Adjacent Sibling Selector किसी specified element के तुरंत बाद (immediately after) आने वाले केवल पहले matching sibling element को select करता है। यहाँ दोनों elements का same parent होना जरूरी है। इसे plus sign (+) से represent किया जाता है।

Syntax:

h1 + p {
  color: green;
}

Example:

<h1>Heading</h1>
<p>This paragraph turns green.</p>
<p>This paragraph is not affected.</p>
<p>This paragraph is not affected.</p>
<p>This paragraph is not affected.</p>

इस example में <h1> के तुरंत बाद पहला <p> मौजूद है, इसलिए h1 + p केवल पहले <p> को select करेगा और उसका color green हो जाएगा। उसके बाद आने वाले बाकी <p> elements select नहीं होंगे, क्योंकि वे <h1> के immediate next sibling नहीं हैं। इसलिए इसे आसानी से याद रख सकते हैं: Adjacent Sibling (+) = तुरंत बाद वाला पहला sibling।

4. General Sibling Selector (~)

General Sibling Selector specified element के बाद आने वाले सभी matching sibling elements को select करता है। इसमें केवल पहला sibling select नहीं होता, बल्कि उसी parent के अंदर बाद में आने वाले सभी matching elements select हो सकते हैं। इसे tilde (~) symbol से represent किया जाता है। यहाँ भी दोनों elements का same parent होना जरूरी है।

Syntax:

h1 ~ p {
  color: purple;
}

Example:

<h1>Heading</h1>
<p>This paragraph is purple.</p>
<p>This one is also purple.</p>
<p>This another one is also purple.</p>

इस example में <h1> के बाद तीन <p> elements हैं। h1 ~ p उन सभी <p> elements को select करेगा क्योंकि वे <h1> के siblings हैं और उनका parent भी same है। इसलिए तीनों paragraphs का color purple हो जाएगा। यहाँ + और ~ में मुख्य difference यह है कि + केवल immediately next matching sibling को select करता है, जबकि ~ बाद में आने वाले सभी matching siblings को select करता है।

Quick Difference

Selector	Meaning	कितने elements select करता है?
div p	Descendant	अंदर मौजूद सभी matching elements
div > p	Child	केवल direct child
h1 + p	Adjacent Sibling	तुरंत बाद वाला पहला sibling
h1 ~ p	General Sibling	बाद में आने वाले सभी matching siblings

एक आसान तरीके से याद करें: Space ( ) = कहीं भी अंदर, > = direct child, + = तुरंत अगला, ~ = आगे के सभी siblings। ये selectors CSS में HTML structure और elements के relationships के आधार पर styling करने के लिए बहुत useful होते हैं।

---

7. Attribute Selector

Attribute Selector का उपयोग HTML elements को उनके attributes की presence या value के आधार पर select करने के लिए किया जाता है। HTML में attributes किसी element के बारे में additional information देते हैं, जैसे id, class, href, type, title, target, disabled, required आदि। CSS में हम attribute selector की मदद से यह check कर सकते हैं कि किसी element के अंदर कोई particular attribute मौजूद है या उस attribute की कोई specific value है।

Attribute Selector में square brackets ([ ]) का उपयोग किया जाता है। उदाहरण के लिए, यदि हमें उन सभी <input> elements को select करना है जिनमें type attribute मौजूद है, तो हम [type] लिख सकते हैं। इसी तरह किसी specific attribute value के आधार पर भी elements select किए जा सकते हैं, जैसे input[type="text"], जो केवल उन <input> elements को select करेगा जिनका type value "text" है।

Basic Syntax:

[attribute] {
  property: value;
}

यहाँ [attribute] का मतलब है कि जिस element में वह attribute मौजूद होगा, वह select हो जाएगा। Attribute Selector का उपयोग विशेष रूप से तब useful होता है जब हमें class या id के बजाय किसी element के attribute के आधार पर styling करनी हो।

उदाहरण के लिए:

input[type="text"] {
  border: 1px solid blue;
}

यहाँ input[type="text"] केवल उन <input> elements को select करेगा जिनका type attribute "text" है। इस प्रकार Attribute Selector हमें HTML elements को उनकी specific characteristics के आधार पर target करने की सुविधा देता है।