CSS Selectors – CSS सेलेक्टर्स

CSS Selectors का उपयोग HTML डॉक्यूमेंट में उन एलिमेंट्स को चुनने के लिए किया जाता है, जिन पर आप स्टाइल लागू करना चाहते हैं। Selectors CSS का एक बहुत ही महत्वपूर्ण हिस्सा हैं क्योंकि ये HTML और CSS के बीच एक पुल का काम करते हैं। इस चैप्टर में, हम CSS Selectors के विभिन्न प्रकारों, उनके उपयोग और उदाहरणों को विस्तार से समझेंगे।

---

CSS Selectors क्या हैं?

CSS Selectors, HTML एलिमेंट्स को पहचानने और उन पर स्टाइल लागू करने का माध्यम हैं।
सिंटैक्स:

selector {
    property: value;
}

उदाहरण:

p {
    color: red;
}

इस कोड में p एक Selector है जो सभी <p> एलिमेंट्स पर स्टाइल लागू करेगा।

---

CSS Selectors के प्रकार

CSS में कई प्रकार के Selectors होते हैं। ये Selectors आपको विशेष HTML एलिमेंट्स को चुनने और उनके लिए कस्टम स्टाइल बनाने में मदद करते हैं। मुख्य CSS Selectors इस प्रकार हैं:

1. Universal Selector
2. Type Selector
3. Class Selector
4. ID Selector
5. Group Selector
6. Attribute Selector
7. Pseudo-class Selector
8. Pseudo-element Selector

---

1. Universal Selector (*)

परिभाषा:
Universal Selector सभी HTML एलिमेंट्स को चुनता है।
सिंटैक्स:

* {
    property: value;
}

उदाहरण:

* {
    margin: 0;
    padding: 0;
}

यह सभी एलिमेंट्स के मार्जिन और पैडिंग को हटा देगा।

---

2. Type Selector (Element Selector)

परिभाषा:
Type Selector किसी विशेष HTML टैग को चुनता है।
सिंटैक्स:

element {
    property: value;
}

उदाहरण:

h1 {
    color: blue;
}
p {
    font-size: 16px;
}

यह सभी <h1> हेडिंग को नीला और <p> एलिमेंट्स को 16px का फॉन्ट साइज देगा।

---

3. Class Selector (.)

परिभाषा:
Class Selector किसी HTML एलिमेंट को उसकी class के आधार पर चुनता है।
सिंटैक्स:

.classname {
    property: value;
}

HTML:

<p class="highlight">यह एक क्लास सेलेक्टर का उदाहरण है।</p>

CSS:

.highlight {
    background-color: yellow;
}

यह CSS कोड उन सभी एलिमेंट्स पर लागू होगा जिनकी class का नाम highlight है।

---

4. ID Selector (#)

परिभाषा:
ID Selector किसी HTML एलिमेंट को उसकी id के आधार पर चुनता है।
सिंटैक्स:

#idname {
    property: value;
}

HTML:

<p id="unique">यह एक ID सेलेक्टर का उदाहरण है।</p>

CSS:

#unique {
    color: green;
}

नोट: ID यूनिक होता है और एक पेज पर केवल एक बार उपयोग किया जा सकता है।

---

5. Group Selector

परिभाषा:
Group Selector एक ही स्टाइल को कई एलिमेंट्स पर लागू करने के लिए उपयोग किया जाता है।
सिंटैक्स:

selector1, selector2 {
    property: value;
}

उदाहरण:

h1, h2, p {
    color: purple;
}

यह CSS <h1>, <h2>, और <p> एलिमेंट्स का रंग पर्पल कर देगा।

---

6. Attribute Selector

परिभाषा:
Attribute Selector उन एलिमेंट्स को चुनता है जिनमें एक विशेष ऐट्रिब्यूट होता है।
सिंटैक्स:

[attribute] {
    property: value;
}

उदाहरण:

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

यह केवल उन <input> एलिमेंट्स पर स्टाइल लागू करेगा जिनका type ऐट्रिब्यूट text है।

---

7. Pseudo-class Selector

परिभाषा:
Pseudo-class Selector उन एलिमेंट्स को चुनता है जो किसी विशेष स्थिति में होते हैं।
सिंटैक्स:

selector:pseudo-class {
    property: value;
}

उदाहरण:

a:hover {
    color: red;
}

यह लिंक के रंग को लाल कर देगा जब माउस उसके ऊपर होगा।

---

8. Pseudo-element Selector

परिभाषा:
Pseudo-element Selector HTML के एक भाग (जैसे पहला अक्षर या लाइन) को चुनता है।
सिंटैक्स:

selector::pseudo-element {
    property: value;
}

उदाहरण:

p::first-line {
    font-weight: bold;
}

यह <p> के पहले लाइन को बोल्ड कर देगा।

---

CSS Selectors की प्राथमिकता (Priority in CSS Selectors)

यदि एक ही एलिमेंट पर कई Selectors लागू होते हैं, तो प्राथमिकता इस क्रम में होती है:

1. Inline CSS (सबसे अधिक प्राथमिकता)।
2. ID Selector।
3. Class Selector।
4. Type Selector।

---

CSS Selectors का उपयोग

CSS Selectors का उपयोग विभिन्न परिस्थितियों में किया जाता है:

• जब आपको किसी खास एलिमेंट पर स्टाइल लागू करना हो।
• जब आपको पूरे पेज पर एक समान स्टाइल चाहिए।
• जब आपको केवल कुछ विशेष स्थितियों के लिए स्टाइल लागू करना हो।

---

निष्कर्ष

CSS Selectors, HTML एलिमेंट्स को पहचानने और उन पर स्टाइल लागू करने का मुख्य साधन हैं। आपने इस चैप्टर में Universal, Type, Class, ID, Group, Attribute, Pseudo-class, और Pseudo-element Selectors को विस्तार से समझा। प्रत्येक Selector की अपनी उपयोगिता और प्राथमिकता होती है।