CSS सेलेक्टर्स उन एलिमेंट्स को सेलेक्ट करते हैं जिन पर आप स्टाइल लागू कर सकते हैं। सबसे बेसिक सेलेक्टर एलिमेंट सेलेक्टर है, जो एलिमेंट को उसके नाम से सेलेक्ट करता है। अन्य सेलेक्टर्स में id, क्लास, यूनिवर्सल, और डिसेंडेंट सेलेक्टर्स शामिल हैं।
सेलेक्टर्स किसी भी CSS स्टेटमेंट के दो भागों में से एक हैं। सेलेक्टर्स का उपयोग HTML पेज पर एलिमेंट्स को एक निश्चित स्टाइल के लिए टारगेट करने के लिए किया जाता है।
CSS सेलेक्टर्स की एक विस्तृत श्रृंखला है जिनका उपयोग वेब पेज पर एलिमेंट्स को सटीक रूप से टारगेट करने के लिए किया जा सकता है, और जब आप एक डिज़ाइन कर रहे होते हैं तो आपको उच्च स्तर की कस्टमाइज़ेशन की अनुमति देते हैं।
यह गाइड CSS में सेलेक्टर्स की मूल बातें और आप अपने कोड में सबसे अधिक उपयोग किए जाने वाले सेलेक्टर्स का लाभ कैसे उठा सकते हैं, का पता लगाएगा।
CSS सेलेक्टर्स
CSS सेलेक्टर्स उन HTML एलिमेंट्स की पहचान करते हैं जिन पर आप CSS स्टाइल लागू करना चाहते हैं। सेलेक्टर्स उनके नाम, ID, क्लास, और अन्य एट्रिब्यूट्स के आधार पर एलिमेंट्स चुन सकते हैं। सेलेक्टर्स CSS नियम में ब्रैकेट्स के एक जोड़े से पहले दिखाई देते हैं।
CSS में, नियमों का उपयोग उन स्टाइल्स को परिभाषित करने के लिए किया जाता है जो एक एलिमेंट या एलिमेंट्स की एक रेंज पर लागू होनी चाहिए। नियमों के दो घटक होते हैं: सेलेक्टर्स और डिक्लेरेशन्स।
यहां CSS में एक नियम का उदाहरण है:
h1 { color: pink; }
यह CSS नियम वेब पेज पर सभी h1 एलिमेंट्स के कलर को पिंक पर सेट करता है। हमारे नियम के दो घटक हैं:
- h1, वह एलिमेंट जिस पर हमारी स्टाइल लागू होती है। इसे सेलेक्टर कहा जाता है।
- color: pink, वह स्टाइल जो हमारे सेलेक्टर में एलिमेंट्स पर लागू होती है। इसे डिक्लेरेशन कहा जाता है। इस उदाहरण में, हम वेब पेज पर सभी h1 एलिमेंट्स का कलर पिंक में बदलते हैं।
CSS सेलेक्टर्स वेब स्टाइल डिज़ाइन करने का एक मूलभूत हिस्सा हैं। सेलेक्टर्स आपको ब्राउज़र को बताने की अनुमति देते हैं कि किन एलिमेंट्स को एक विशेष स्टाइल का उपयोग करना चाहिए। उदाहरण के लिए, आपके पास एक सेलेक्टर हो सकता है जो ब्राउज़र को वेब पेज पर सभी <h1> एलिमेंट्स, या सभी <p> एलिमेंट्स को स्टाइल करने का निर्देश देता है।
CSS सेलेक्टर टाइप्स
CSS सेलेक्टर्स की एक विस्तृत श्रृंखला प्रदान करता है। आइए उन मुख्य सेलेक्टर्स के उदाहरण का पता लगाएं जिनका सामना आप CSS नियम डिज़ाइन करते समय करने की संभावना रखते हैं।
CSS एलिमेंट-बेस्ड सेलेक्टर
एलिमेंट-बेस्ड सेलेक्टर आपको एक डॉक्यूमेंट में एक एलिमेंट के सभी इंस्टेंस पर स्टाइल लागू करने की अनुमति देता है जिससे एक नियम मेल खाता है। उदाहरण के लिए, आप पेज पर सभी <p> टैग्स पर स्टाइल लागू करने के लिए एलिमेंट सेलेक्टर का उपयोग कर सकते हैं।
मान लीजिए हम वेब पेज पर सभी पैराग्राफ-बेस्ड टेक्स्ट के कलर को ग्रे में बदलना चाहते हैं। हम इसे इस कोड का उपयोग करके कर सकते हैं:
p { color: gray; }
हमारे "p" सेलेक्टर के अंदर डिक्लेरेशन्स हमारे वेब पेज पर हर पैराग्राफ (HTML <p> टैग) पर लागू होंगे।
CSS id सेलेक्टर
CSS id सेलेक्टर एक HTML एलिमेंट को पेज पर उसके ID के आधार पर सेलेक्ट करता है। HTML IDs यूनिक होते हैं इसलिए id सेलेक्टर का उपयोग वेब पेज पर एक सिंगल एलिमेंट पर स्टाइल लागू करने के लिए किया जाता है। ID सेलेक्टर का सिंटैक्स एक हैश साइन के बाद एलिमेंट ID है।
मान लीजिए हम अपने पेज पर "box9" नामक एक एलिमेंट के CSS हाइट एट्रिब्यूट के मान को 150px पर सेट करना चाहते हैं। हम इसे इस कोड का उपयोग करके कर सकते हैं:
#box9 { height: 150px; }
यह नियम "box9" id वाले एलिमेंट की हाइट को 150px पर सेट करेगा।
CSS क्लास सेलेक्टर्स
CSS क्लास सेलेक्टर्स उन एलिमेंट्स को ढूंढते हैं जिनके पास एक विशेष क्लास एट्रिब्यूट है। क्लास सेलेक्टर का सिंटैक्स एक पीरियड (.) और फिर उस क्लास का नाम है जिसे आप सेलेक्ट करना चाहते हैं।
तो, यदि आप क्लास "boxMiddle" को टारगेट करना चाहते थे, तो आप सेलेक्टर ".boxMiddle" का उपयोग करेंगे।
आइए मान लें कि हम अपने वेब पेज पर एक बॉक्स डिज़ाइन कर रहे हैं। बॉक्स में पिंक बैकग्राउंड कलर होना चाहिए। हमारे बॉक्स को "pinkBox" क्लास असाइन की गई है, जिस पर हम अपनी स्टाइल लागू कर सकते हैं। यहां वह कोड है जिसका उपयोग हम pinkBox क्लास वाले एलिमेंट्स का कलर पिंक पर सेट करने के लिए करेंगे:
.pinkBox { color: pink; }
वेब पेज पर "pinkBox" क्लास वाला हर एलिमेंट पिंक पर सेट हो जाएगा।
इसके अलावा, आप यह भी निर्दिष्ट कर सकते हैं कि केवल एक विशेष क्लास वाले विशिष्ट एलिमेंट्स को स्टाइल द्वारा प्रभावित किया जाना चाहिए। केवल एक क्लास सेलेक्टर का उपयोग करके, एक विशेष क्लास वाला हर एलिमेंट आपके द्वारा परिभाषित स्टाइल से प्रभावित होगा।
यदि हम एक एलिमेंट टाइप से पहले क्लास सेलेक्टर का उपयोग करते हैं, तो हम केवल एक निश्चित क्लास वाले विशिष्ट एलिमेंट्स पर स्टाइल लागू कर सकते हैं। मान लीजिए हम HTML <div> टैग के बैकग्राउंड कलर को "pinkBox" क्लास के साथ पिंक पर सेट करना चाहते हैं। इसके लिए स्टाइल इस प्रकार होगी:
div.pinkBox { color: pink; }
यह स्टाइल केवल "pinkBox" क्लास वाले हर <div> टैग पर लागू होगी।
CSS यूनिवर्सल सेलेक्टर
CSS यूनिवर्सल सेलेक्टर वेब पेज पर सभी एलिमेंट्स को सेलेक्ट करता है। सेलेक्टर को एक एस्टेरिस्क (*) का उपयोग करके दर्शाया जाता है, जिसके बाद कोई एलिमेंट नाम नहीं होता। इसका उपयोग अक्सर वेब पेज के लिए मार्जिन या डिफ़ॉल्ट फॉन्ट सेट करने के लिए किया जाता है।
मान लीजिए हम वेब पेज पर सभी एलिमेंट्स को पेज के सेंटर में एलाइन करना चाहते हैं। हम इस कोड का उपयोग करके इस स्टाइल को अपने वेब पेज पर लागू कर सकते हैं:
* { text-align: center; }
यह नियम वेब पेज पर हर आइटम पर "text-align: center;" स्टाइल लागू करता है।
CSS डिसेंडेंट सेलेक्टर्स
CSS डिसेंडेंट सेलेक्टर्स एक एलिमेंट को सेलेक्ट करते हैं जो किसी अन्य एलिमेंट का डिसेंडेंट है जिस पर स्टाइल की एक रेंज लागू की जानी चाहिए। सिंटैक्स एक एलिमेंट को निर्दिष्ट करना है, उसके बाद एक स्पेस, उसके बाद वह डिसेंडेंट एलिमेंट जिसे आप सेलेक्ट करना चाहते हैं।
मान लीजिए आप एक लिस्ट में सभी लिंक्स के बैकग्राउंड कलर को येलो पर सेट करना चाहते हैं। हालांकि, आप नहीं चाहते कि यह स्टाइल वेब पेज पर किसी अन्य लिंक को प्रभावित करे। आप इसे इस कोड का उपयोग करके कर सकते हैं:
li a { background-color: yellow; }
यह स्टाइल "li a" डिसेंडेंट सेलेक्टर का उपयोग करता है। इसका मतलब है कि हमने जो स्टाइल बनाई है वह केवल HTML <li> टैग में एक HTML <a> टैग पर लागू होगी। हमारी स्टाइल वेब पेज पर दिखाई देने वाले किसी अन्य <a> टैग पर लागू नहीं होगी।
CSS सेलेक्टर लिस्ट्स
यदि आपके पास एक से अधिक एलिमेंट हैं जिन पर एक विशिष्ट स्टाइल लागू की जानी चाहिए, तो आप सेलेक्टर लिस्ट का उपयोग कर सकते हैं। सेलेक्टर लिस्ट एक लिस्ट में सभी इंडिविजुअल सेलेक्टर्स पर एक नियम लागू करती है।
मान लीजिए हमारे पास एक ही स्टाइल नियमों के साथ दो CSS नियम हैं। ये इस प्रकार हैं:
h2 { text-align: center; } .alignCenter { text-align: center; }
हम इन दो नियमों को एक सेलेक्टर लिस्ट में जोड़कर अपने कोड को पढ़ने में आसान बना सकते हैं। हम अपने स्टाइल्स के बीच कॉमा जोड़कर ऐसा कर सकते हैं:
h2, .alignCenter { text-align: center; }
यह कोड हमारे पहले उदाहरण के समान तरीके से कार्य करता है। हालांकि, हमारा दूसरा उदाहरण एक सेलेक्टर लिस्ट का उपयोग करता है जो हमारे कोड को अधिक संक्षिप्त बनाता है।
CSS ग्रुपिंग सेलेक्टर्स
CSS ग्रुपिंग सेलेक्टर कई सेलेक्टर्स पर स्टाइल्स का एक सेट लागू करता है। इसका उपयोग दोहराव को कम करने और आपको क्लियर कोड लिखने में मदद करने के लिए किया जाता है। सिंटैक्स एलिमेंट सेलेक्टर्स की एक लिस्ट है जो कॉमा से अलग की गई है, उसके बाद वे CSS नियम जिन्हें आप एलिमेंट्स पर लागू करना चाहते हैं।
आइए मान लें कि हम एक वेब पेज डिज़ाइन कर रहे हैं जो निम्न स्टाइल्स का उपयोग करता है:
h1 { text-align: center; font-size: 32px; font-weight: normal; } h2 { text-align: center; font-size: 24px; font-weight: normal; } h3 { text-align: center; font-size 18px; font-weight: normal; }
इस कोड में, "font-weight: normal;" और "text-align: center;" स्टाइल्स सभी सेलेक्टर्स द्वारा साझा किए जाते हैं। अपने कोड में दोहराव को कम करने के लिए, हम इन स्टाइल्स को एक ग्रुपिंग सेलेक्टर का उपयोग करके एक साथ ग्रुप कर सकते हैं। यहां वह कोड है जिसका उपयोग हम इस कार्य को पूरा करने के लिए करेंगे:
h1, h2, h3 { text-align: center; font-weight: normal; } h1 { font-size: 32px; } h2 { font-size: 24px; } h3 { font-size: 18px; }
हमने दो स्टाइल्स, text-align और font-weight, को एक साथ ग्रुप किया है, जो हर टैग में समान थे। इसने हमें अपने कोड को पढ़ने में आसान बनाने की अनुमति दी है।
निष्कर्ष
CSS सेलेक्टर्स आपको एक वेब पेज पर एक विशेष एलिमेंट या एलिमेंट्स की रेंज पर स्टाइल लागू करने की अनुमति देते हैं। CSS द्वारा सेलेक्टर्स की एक विस्तृत श्रृंखला प्रदान की जाती है। इनमें id सेलेक्टर्स, क्लास सेलेक्टर्स, और ग्रुपिंग सेलेक्टर्स शामिल हैं, जिनका उपयोग आप सटीक CSS स्टाइल बनाने के लिए कर सकते हैं।
यह लेख केवल CSS में सेलेक्टर्स की सतह को खरोंचता है। एट्रिब्यूट सेलेक्टर्स, स्यूडो-क्लासेज और स्यूडो-एलिमेंट्स, कॉम्बिनेटर्स, और अन्य सेलेक्टर्स भी हैं जिनका उपयोग CSS में किया जाता है। यदि आप अधिक उन्नत नियम विकसित करना चाहते हैं, तो आप इन सेलेक्टर्स पर अधिक गहराई से शोध करना चाह सकते हैं।
इस ट्यूटोरियल ने, उदाहरणों के संदर्भ में, CSS में सबसे अधिक उपयोग किए जाने वाले सेलेक्टर्स का उपयोग कैसे करें, पर चर्चा की। अब आपके पास CSS सेलेक्टर्स का उपयोग करके एक एक्सपर्ट की तरह स्टाइल बनाने का ज्ञान है।
शीर्ष CSS शिक्षण संसाधनों, कोर्सेज, और किताबों पर सलाह के लिए, हमारा CSS सीखने का गाइड देखें।
