Structure of Adhaar Number

1️⃣ div ul li a {} — Descendant Selector

इसका मतलब है:
👉 div के अंदर कहीं भी (direct या indirect)
👉 ul के अंदर
👉 li के अंदर
👉 a टैग हो

यानी

a कितनी भी nesting में हो, match हो जाएगा।

Example

<div>
  <section>
    <ul>
      <li>
        <span>
          <a href="#">Link</a>
        </span>
      </li>
    </ul>
  </section>
</div>

✔️ यह selector apply होगा, क्योंकि
div → ul → li → a संबंध मौजूद है (बीच में कुछ भी हो सकता है)

---

2️⃣ div > ul > li > a {} — Child Selector

इसका मतलब है:
👉 ul div का direct child होना चाहिए
👉 li ul का direct child होना चाहिए
👉 a li का direct child होना चाहिए

यानी

⚠️ बीच में एक भी extra tag आया तो selector fail

Example (काम करेगा)

<div>
  <ul>
    <li>
      <a href="#">Link</a>
    </li>
  </ul>
</div>

✔️ सब direct child हैं

Example (काम नहीं करेगा)

<div>
  <ul>
    <li>
      <span>
        <a href="#">Link</a>
      </span>
    </li>
  </ul>
</div>

❌ यहाँ a direct child नहीं है li का

---

🔍 Quick Comparison Table

Selector	Flexibility	Speed	Strictness
div ul li a	ज्यादा	थोड़ा slow	Loose
div > ul > li > a	कम	तेज	Strict

---

✅ कब कौन सा इस्तेमाल करें?

✔️ Layout control / menu styling → >
✔️ General styling / unknown nesting → space selector
✔️ Performance + accuracy चाहिए → >

---

📌 आसान याद रखने का तरीका

• Space ( ) = कहीं भी अंदर
• Greater than (>) = सीधा बच्चा (direct child)

अब 

---

1️⃣ div + ul {} — Adjacent Sibling Selector

अर्थ

👉 div के तुरंत बाद जो पहला ul आता है
👉 वही select होगा

⚠️ बीच में कोई भी element नहीं होना चाहिए

Example

<div></div>
<ul>First UL</ul>
<ul>Second UL</ul>

div + ul {
  color: red;
}

✔️ केवल First UL red होगा
❌ Second UL नहीं

---

यह काम नहीं करेगा

<div></div>
<p>Text</p>
<ul>UL</ul>

❌ क्योंकि div के तुरंत बाद ul नहीं है

---

2️⃣ div ~ ul {} — General Sibling Selector

अर्थ

👉 div के बाद आने वाले सभी ul
👉 (same parent के अंदर)

Example

<div></div>
<ul>First UL</ul>
<p>Text</p>
<ul>Second UL</ul>

div ~ ul {
  color: blue;
}

✔️ First UL और Second UL दोनों blue होंगे

---

⚠️ ज़रूरी शर्त (दोनों के लिए)

• div और ul same parent के बच्चे होने चाहिए
• सिर्फ बाद वाले siblings select होते हैं
  (पहले वाले नहीं)

---

🔍 Quick Comparison

Selector	किसे select करता है
div + ul	div के तुरंत बाद वाला ul
div ~ ul	div के बाद आने वाले सभी ul
div ul	div के अंदर ul
div > ul	div का direct ul child

---

📌 याद रखने की Trick

• > = Child
• = Descendant
• + = Next sibling
• ~ = All next siblings

---

CSS में ऐसे कई तरह के selectors होते हैं। मैं उन्हें category-wise, आसान भाषा में बता रहा हूँ 👇

---

1️⃣ Basic Selectors (सबसे सरल)

🔹 Element selector

p { }
h1 { }
div { }

👉 सीधे tag को select करता है

---

🔹 Class selector

.box { }
.menu-item { }

👉 class="box" वाले elements

---

🔹 ID selector

#header { }

👉 id="header" (unique)

---

🔹 Universal selector

* { }

👉 सबको select करता है

---

2️⃣ Attribute Selectors (बहुत powerful 🔥)

🔹 Attribute exists

input[type] { }

🔹 Attribute equals

input[type="text"] { }

🔹 Starts with

a[href^="https"] { }

🔹 Ends with

img[src$=".png"] { }

🔹 Contains

a[href*="blog"] { }

👉 Blogger / SEO / forms में बहुत काम आते हैं

---

3️⃣ Pseudo-Classes (state based)

🔹 Hover, Active

a:hover { }
button:active { }

🔹 Focus

input:focus { }

---

🔹 Structural pseudo-classes

li:first-child { }
li:last-child { }
li:nth-child(2) { }
li:nth-child(even) { }
li:nth-of-type(3) { }

---

🔹 Form related

input:checked { }
input:disabled { }
input:required { }

---

4️⃣ Pseudo-Elements (element का हिस्सा)

p::first-letter { }
p::first-line { }
div::before { }
div::after { }

👉 decoration, icons, quotes में बहुत उपयोगी

---

5️⃣ Grouping Selector

h1, h2, h3 {
  font-family: serif;
}

👉 multiple selectors को एक साथ

---

6️⃣ Advanced / Modern Selectors 🔥

🔹 :not()

li:not(.active) { }

---

🔹 :is() (short selector)

:is(h1, h2, h3) { }

---

🔹 :where() (zero specificity)

:where(nav a) { }

---

🔹 :has() (parent selector 😲)

div:has(img) { }

👉 बहुत modern, Chrome/Edge में supported

---

7️⃣ Combinators (जो आपने पूछे थे)

Selector	Meaning
	Descendant
>	Direct child
+	Next sibling
~	All next siblings

---

🧠 पूरा CSS Selector Map (Shortcut)

Basic        → tag, .class, #id
Combinators  →  >  +  ~
Attribute    → [type="text"]
State        → :hover :focus
Structure    → :nth-child()
Parts        → ::before ::after
Logic        → :not() :has()

अब हम “कौन-सा CSS selector कब और क्यों उपयोग करें” इसे real-life सोच + Blogger/Website examples के साथ समझेंगे।
यह समझ आ जाने के बाद CSS रटना नहीं पड़ेगा, खुद-ब-खुद दिमाग बताएगा कि कौन-सा selector सही है।

---

🧠 Selector चुनने का मूल नियम

HTML structure देखो → relation समझो → selector चुनो

---

🔷 1. Element / Class / ID

👉 जब किसी चीज़ की पहचान साफ हो

✅ Element selector – कब?

✔️ जब सभी समान tags को style देना हो

p { line-height: 1.6; }

📌 उपयोग: Blog paragraph spacing

---

✅ Class selector – कब?

✔️ जब एक जैसा काम कई जगह करना हो

.btn { background: blue; }

📌 उपयोग: Button, card, widget

---

✅ ID selector – कब?

✔️ जब एक ही element को target करना हो

#header { position: fixed; }

📌 उपयोग: Header, footer
⚠️ ज़्यादा उपयोग न करें (specificity issue)

---

🔷 2. Descendant (space)

👉 जब अंदर की चीज़ों पर broadly काम करना हो

.article p { color: #333; }

📌 कब? ✔️ nesting depth पता नहीं
✔️ flexibility चाहिए

❌ कब नहीं? ⚠️ performance critical menu

---

🔷 3. Child (>)

👉 जब structure fixed हो

nav > ul > li > a { color: white; }

📌 कब? ✔️ Menu, navbar
✔️ Blogger theme editing

🧠 फायदा:

• fast
• safe
• unexpected match नहीं

---

🔷 4. Adjacent Sibling (+)

👉 किसी heading के तुरंत बाद

h2 + p { margin-top: 0; }

📌 कब? ✔️ Article formatting
✔️ FAQ layout

🧠 सोच:

“इसके ठीक बाद वाला”

---

🔷 5. General Sibling (~)

👉 एक element के बाद आने वाले सभी

h2 ~ p { color: gray; }

📌 कब? ✔️ Long content styling
✔️ Section-based design

---

🔷 6. Attribute Selectors

👉 जब class/id नहीं हो

a[href^="https"] { color: green; }

📌 कब? ✔️ Blogger auto-generated HTML
✔️ SEO / external links

🧠 Real use:

• external link icon
• PDF links

---

🔷 7. Hover / Focus / Active

👉 User interaction पर

a:hover { text-decoration: underline; }
input:focus { border-color: blue; }

📌 कब? ✔️ UX improvement
✔️ Forms, buttons

---

🔷 8. Structural (nth-child)

👉 Repeating layout में

li:nth-child(even) { background: #f5f5f5; }

📌 कब? ✔️ Tables
✔️ Menu items
✔️ List design

🧠 सोच:

“हर दूसरा / तीसरा element”

---

🔷 9. Pseudo-Elements (::before, ::after)

👉 Extra HTML के बिना decoration

a::after {
  content: " ↗";
}

📌 कब? ✔️ Icon
✔️ Quote
✔️ Badge

💡 Blogger में बहुत powerful

---

🔷 10. :not()

👉 सब पर लागू, सिवाय…

li:not(.active) { opacity: 0.6; }

📌 कब? ✔️ Active menu छोड़कर बाकी
✔️ Filtering UI

---

🔷 11. :is() और :where()

👉 CSS छोटा और साफ करने के लिए

:is(h1, h2, h3) { font-family: serif; }

📌 कब? ✔️ Repeated selectors
✔️ Clean code

---

🔷 12. :has()

👉 Parent को child देखकर style करना

div:has(img) { padding: 10px; }

📌 कब? ✔️ Modern layouts
✔️ Conditional design

⚠️ Old browsers में limited support

---

🧩 Decision Map (सबसे ज़रूरी भाग)

एक ही tag?           → element
Reuse चाहिए?         → class
Single unique?       → id
अंदर कहीं भी?        → space
Direct relation?     → >
ठीक बाद वाला?        → +
बाद के सभी?          → ~
Class नहीं?          → attribute
User action?         → :hover/:focus
Pattern repeat?      → nth-child
Extra icon/text?     → ::before
कुछ छोड़ना है?       → :not()