जब वेब पेज को स्टाइल करने के लिए CSS का उपयोग करते हैं, तो आप अक्सर अपने पेज के कुछ हिस्सों को टारगेट करना चाहेंगे। अपने एलिमेंट में से एक या अधिक को चुनने के तरीकों में से एक है उनके ID और/या क्लास एट्रिब्यूट द्वारा।
इस ट्यूटोरियल के दौरान, इंटरैक्टिव Codepen को देखें और बस मेरे साथ खेलें!
ID एट्रिब्यूट और CSS सेलेक्टर
आइए `
` टैग का उपयोग करके एक साधारण पैराग्राफ बनाएं:
<p> Color this paragraph! </p>
ID एक यूनिक आइडेंटिफायर है जिसे आप किसी एकल एलिमेंट पर जोड़ते हैं ताकि उसकी विशिष्ट पहचान की जा सके। यह id="#NAME" कन्वेंशन का पालन करता है।
इसे ध्यान में रखते हुए, और चूंकि हम अपने पैराग्राफ को रंगना चाहते हैं, आइए इसे एक यूनिक नाम दें।
<p id="paragraph-colored"> Color this paragraph! </p>
अब हमारे पास हमारा ID यूनिक आइडेंटिफायर है, हमें यह सुनिश्चित करने की आवश्यकता है कि हम उसी ID को दूसरे एलिमेंट पर न जोड़ें। जबकि ब्राउज़र शिकायत नहीं करेगा, यह उद्देश्य खो देगा और CSS इरादे के अनुसार काम नहीं करेगा।
हमारे ID के साथ, हम हैश सिम्बल # का उपयोग करके CSS के साथ इसे चुन सकते हैं। आइए अपने p टैग को बैंगनी बनाएं:
#paragraph-colored { color: purple; }
आसान है ना? 😊
क्लास एट्रिब्यूट और इसका CSS सेलेक्टर
कूल, हमारे पास बैंगनी रंग के टेक्स्ट के साथ हमारा पैराग्राफ है। आइए अब मान लें कि हमारे सिंगल p टैग के नीचे एवोकाडो इमेज का एक गुच्छा है:
<img src="https://avatars1.githubusercontent.com/u/43709642?s=280&v=4" alt="avocado"> <img src="https://avatars1.githubusercontent.com/u/43709642?s=280&v=4" alt="avocado"> <img src="https://avatars1.githubusercontent.com/u/43709642?s=280&v=4" alt="avocado">
हम इन एवोकाडो-डेवलपर्स (जो भी इसका मतलब है) की पहचान और चयन कैसे कर सकते हैं? हम जानते हैं कि हम ID टैग का उपयोग नहीं कर सकते, क्योंकि इसका उपयोग एकल आइटम की विशिष्ट पहचान के लिए किया जाता है। यहीं क्लास एट्रिब्यूट खेल में आता है।
क्लास एट्रिब्यूट class="#CLASS_NAME" कन्वेंशन का पालन करता है। चूंकि कई सदस्य एक क्लास से संबंधित हो सकते हैं, हमारे सभी एवोकाडो डेवलपर्स को एक क्लास जैसे असाइन किया जा सकता है:
<img src="https://avatars1.githubusercontent.com/u/43709642?s=280&v=4" alt="avocado" class="avocado-devs">
बढ़िया! हमारी एवोकाडो इमेज को "avocado-devs" क्लास असाइन की गई है। हम अब CSS क्लास सेलेक्टर का उपयोग कर सकते हैं जिसे एक साधारण डॉट (.) द्वारा दर्शाया जाता है। आइए आगे बढ़ें और अपने एवोकाडो डेवलपर्स पर CSS filter प्रॉपर्टी जोड़ें। हम मान लेंगे कि वे देर रात काम कर रहे हैं तो आइए उनके रंगों को 100 प्रतिशत इनवर्ट करें।
.avocado-devs { filter: invert(100) }
क्लास के साथ हम मूल रूप से ग्रुप बनाते हैं और फिर CSS क्लास सेलेक्टर के साथ हम एलिमेंट के ग्रुप पर स्टाइल लागू कर सकते हैं जैसा हम चाहते हैं।
क्लास सेलेक्टर के साथ जेनेरिक टैग सेलेक्टर का उपयोग करना
हम अक्सर देखते हैं कि CSS के साथ क्लास चुनते समय जेनेरिक टैग सेलेक्टर का उपयोग डॉट सेलेक्टर के साथ संयोजन में करना बेहतर होता है। क्यों? क्योंकि हम अपने सेलेक्टर के साथ जितने अधिक विशिष्ट होते हैं, हमारा CSS उतना ही बेहतर लागू होगा।
CSS के साथ, हम जेनेरिक टैग सेलेक्टर का उपयोग टैग नाम द्वारा उन्हें संदर्भित करके करते हैं। तो उदाहरण के लिए ये सभी वैध टैग सेलेक्टर हैं:
/* H1 */ h1{} /* Paragraphs */ p{ }
इसलिए हम अपने इमेज सेलेक्टर को `img` जेनेरिक टैग शामिल करके रीफैक्टर कर सकते हैं:
img.avocado-devs { filter: invert(100) }
कार्यक्षमता नहीं बदली है, लेकिन जैसे-जैसे आपका कोड बढ़ता है यह विशिष्टता महत्वपूर्ण है। यह आपके कोड को अधिक पठनीय भी बनाएगा। अन्य डेवलपर्स देखेंगे कि avocado-devs क्लास एक इमेज को संदर्भित करती है।
यह महत्वपूर्ण है क्योंकि यहां हम केवल उन इमेज पर फ़िल्टर लागू करते हैं जिनमें विशिष्ट क्लास नाम है। यदि हम उपयुक्त क्लास के बिना एक और एवोकाडो-डेव इमेज जोड़ते हैं तो स्टाइल लागू नहीं होगा। वेब डेवलपर्स के रूप में यह सशर्त व्यवहार अक्सर वही होता है जो हम चाहते हैं।
