CSS Selectors
CSS में एलिमेंट्स को सिलेक्ट करने के सभी तरीके
CSS Selectors क्या होते हैं?
CSS Selectors का उपयोग HTML एलिमेंट्स को स्टाइल देने के लिए किया जाता है। ये यह तय करते हैं कि CSS का कौन सा नियम किस HTML एलिमेंट पर लागू होगा। CSS Selectors के बिना, हम वेब पेज के विभिन्न तत्वों को स्टाइल नहीं कर सकते हैं।
एक CSS नियम की बेसिक संरचना:
selector { property: value; }
CSS Selector के मुख्य प्रकार
- Universal Selector:
*- सभी एलिमेंट्स पर लागू होता है।
उदाहरण:* { margin: 0; padding: 0; } - Element Selector:
p,h1- HTML टैग्स को सीधे स्टाइल करता है।
उदाहरण:p { font-size: 16px; } - Class Selector:
.classname- एक से अधिक एलिमेंट्स पर लागू हो सकता है।
उदाहरण:.highlight { background-color: yellow; } - ID Selector:
#idname- केवल एक यूनिक एलिमेंट पर लागू होता है।
उदाहरण:#header { height: 80px; } - Group Selector:
h1, h2, h3- एक से अधिक एलिमेंट्स को एक साथ स्टाइल करने के लिए।
उदाहरण:h1, h2, h3 { color: #333; } - Attribute Selector:
[attribute]- विशेष attribute वाले टैग को टारगेट करता है।
उदाहरण:input[type="text"] { width: 200px; } - Pseudo-class Selector:
:hover,:first-child- एलिमेंट्स की विशेष स्थितियों को स्टाइल करता है।
उदाहरण:a:hover { text-decoration: underline; } - Pseudo-element Selector:
::before,::after- एलिमेंट्स के भागों को स्टाइल करता है।
उदाहरण:p::first-line { font-weight: bold; }
CSS Selectors के विस्तृत उदाहरण
p { color: red; } - सभी <p> एलिमेंट्स को लाल रंग देगा।.menu { background: #333; } - सभी menu क्लास वाले एलिमेंट्स पर लागू होगा।#header { font-size: 24px; } - header ID वाले एलिमेंट को टारगेट करेगा।
div p { } - div के अंदर सभी p एलिमेंट्सdiv > p { } - div के सीधे चाइल्ड p एलिमेंट्सh1 + p { } - h1 के ठीक बाद वाले p एलिमेंटh1 ~ p { } - h1 के बाद सभी p एलिमेंट्स
a:hover { color: blue; } - लिंक पर hover होने पर रंग बदल जाएगा।li:nth-child(odd) { background: #eee; } - विषम सूची आइटम्स को स्टाइल करेगा।input:focus { border-color: blue; } - फोकस होने पर इनपुट का बॉर्डर बदलेगा।
input[type="text"] { border: 1px solid gray; } - केवल text input पर प्रभाव डालेगा।a[target="_blank"] { } - नए टैब में खुलने वाले लिंक्सimg[alt~="logo"] { } - alt attribute में "logo" वाले इमेजेस
अभ्यास के लिए प्रश्न
- ID और Class selector में क्या अंतर है? कब किसका उपयोग करना चाहिए?
- Pseudo-class और Pseudo-element में क्या अंतर है? प्रत्येक के दो उदाहरण दें।
- Group selectors के क्या फायदे हैं? क्या यह परफॉर्मेंस को प्रभावित करते हैं?
- निम्नलिखित को सिलेक्ट करने के लिए CSS selector लिखें:
- किसी डिव के अंदर सभी पैराग्राफ जो पहले चाइल्ड नहीं हैं
- सभी इनपुट फील्ड्स जिनका टाइप "email" है
- टेबल की हर विषम पंक्ति
निष्कर्ष
CSS Selectors वेब डेवलपमेंट का एक मूलभूत हिस्सा हैं। सही selector का चयन न केवल आपके कोड को अधिक प्रभावी बनाता है, बल्कि वेबसाइट की परफॉर्मेंस और मेन्टेनेबिलिटी को भी बेहतर करता है।
CSS3 के साथ नए selectors जुड़े हैं जो और भी अधिक सटीकता से एलिमेंट्स को टारगेट करने की सुविधा देते हैं। अभ्यास के साथ आप इन selectors का प्रभावी उपयोग करना सीख सकते हैं।
CSS Specificity को समझना महत्वपूर्ण है। जब एक ही एलिमेंट पर कई नियम लागू होते हैं, तो सबसे अधिक specificity वाला नियम प्राथमिकता पाता है। निम्नलिखित क्रम में specificity बढ़ती है:
- Universal selector (*)
- Element selectors (p, div)
- Class selectors (.class)
- ID selectors (#id)
- Inline styles
- !important