CSS Selectors

यह लेसन सबसे ज़्यादा important है, क्योंकि Selectors ही CSS का दिल (Heart) होते हैं ❤️ अगर आप selectors को अच्छे से समझ गए, तो आप किसी भी HTML element को बहुत smart तरीके से style कर सकते हैं। चलिए इसे step-by-step आसान हिंदी + इंग्लिश मिक्स में समझते हैं

CSS Selectors क्या होते हैं?

CSS Selectors का काम है — HTML elements को पहचानना और उन्हें target करना। मतलब कि “किस element पर CSS लागू करनी है”, यह selectors से तय होता है। 👉 Simple words में — Selectors वो तरीके हैं जिनसे हम HTML elements को चुनते हैं और उन पर style लगाते हैं।

CSS Rule का Structure याद रखें:

selector {
  property: value;
}

यहाँ selector वही हिस्सा है जो element को select करता है। अब देखते हैं कितने तरह के selectors होते हैं।

CSS Selectors के Types

CSS में बहुत सारे selectors होते हैं, लेकिन सबसे common ये 6 हैं

प्रकार	Example	Description
1️⃣ Element Selector	p { color: red; }	किसी HTML tag को सीधे select करता है
2️⃣ ID Selector	#title { color: blue; }	किसी element के id attribute को target करता है
3️⃣ Class Selector	.box { background: yellow; }	एक या एक से ज्यादा elements को style करने के लिए
4️⃣ Universal Selector	* { margin: 0; }	सभी elements को target करता है
5️⃣ Grouping Selector	h1, h2, h3 { color: green; }	कई elements पर एक साथ CSS लागू करता है
6️⃣ Descendant Selector	div p { color: purple; }	किसी element के अंदर के child elements को target करता है

अब हर एक को आसान example के साथ समझते हैं

Element Selector

यह selector सीधे किसी HTML टैग को target करता है।

p {
  color: blue;
  font-size: 18px;
}

इसका मतलब: सारे <p> टैग का text नीला और 18px का होगा।

ID Selector

अगर किसी HTML element में id दी गई है, तो आप उसे #idname से target कर सकते हैं।

<h1 id="mainTitle">Welcome!</h1>

#mainTitle {
  color: red;
  text-align: center;
}

याद रखें — एक page में एक ही unique ID होनी चाहिए।

Class Selector

अगर आप कई elements को एक जैसा style देना चाहते हैं, तो class selector perfect है। HTML में class देने के बाद CSS में . (dot) लगाकर उसे call किया जाता है।

<p class="note">यह important note है।</p>
<p class="note">यह भी same class वाला paragraph है।</p>

.note {
  color: green;
  font-style: italic;
}

एक ही class कई elements पर apply हो सकती है।

Universal Selector

अगर आप चाहते हैं कि पूरे पेज के हर element पर कोई style लागू हो, तो * (asterisk) का इस्तेमाल करें।

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

यह तरीका खासकर “reset CSS” के लिए बहुत काम आता है।

Grouping Selector

कभी-कभी हमें कई elements पर एक ही CSS property देनी होती है। हर बार अलग-अलग लिखने की जगह, हम उन्हें एक साथ group कर सकते हैं।

h1, h2, h3 {
  color: #0077cc;
  text-align: center;
}

इससे code clean और छोटा हो जाता है।

Descendant Selector (Nested Elements)

अगर कोई element किसी दूसरे element के अंदर है, तो आप उसे nested selector से target कर सकते हैं।

<div>
  <p>यह div के अंदर वाला paragraph है</p>
</div>

<p>यह बाहर वाला paragraph है</p>

ऊपर वाले कोड में सिर्फ div के अंदर वाला paragraph लाल (red) होगा, बाहर वाला नहीं।

Extra Useful Selectors

Selector	Example	काम (Function)
`element1, element2`	`h1, p`	दोनों elements को style करेगा
`element.class`	`p.note`	सिर्फ उन`<p>`पर लागू होगा जिनकी class “note” है
`parent>child`	`div>p`	सिर्फ direct child elements को target करेगा
`element + element`	`h1 + p`	`h1`के ठीक बाद वाले`p`को style करेगा
`element ~ element`	`h1 ~ p`	`h1`के बाद आने वाले सभी`p`elements को style करेगा

Example – Mix of Different Selectors

<!DOCTYPE html>
<html>
<head>
<style>
  * {
    font-family: Arial;
  }

  h1, h2 {
    color: #0077cc;
    text-align: center;
  }

  #mainPara {
    color: red;
  }

  .info {
    background: #f0f0f0;
    padding: 10px;
  }

  div p {
    color: green;
  }
</style>
</head>
<body>

<h1>CSS Selectors Example</h1>
<h2>Learn CSS Easily</h2>

<p id="mainPara">यह paragraph ID से styled है।</p>

<p class="info">यह paragraph class से styled है।</p>

<div>
  <p>यह div के अंदर वाला paragraph है।</p>
</div>

</body>
</html>

Quick Recap

Selector	Symbol	Example	Use
Element	none	`p {}`	HTML tag select करता है
ID	#	`#title {}`	Unique element select करता है
Class	.	`.box {}`	Multiple elements style करने के लिए
Universal	*	`* {}`	सभी elements पर लागू होता है
Grouping	,	`h1, h2 {}`	कई elements को group करता है
Descendant	space	`div p {}`	parent के अंदर के child को target करता है

Final Thoughts

Selectors को अच्छे से समझना हर CSS learner के लिए foundation skill है। जब आप जानते हैं कि किस element को कैसे select करना है, तो आप अपनी वेबसाइट को बहुत precise तरीके से design कर सकते हैं।

अब तैयार हो जाइए अगले लेसन के लिए — “CSS How To” जहाँ हम सीखेंगे कि CSS को HTML में सही तरीके से कैसे जोड़ा जाता है — Inline, Internal और External तीनों तरीकों से।