एचटीएमएल और उनके सीएसएस चयनकर्ताओं में आईडी और क्लास एट्रीब्यूट्स

वेब पेजों को स्टाइल करने के लिए CSS का उपयोग करते समय, आप अक्सर अपने पेज के कुछ हिस्सों को लक्षित करना चाहेंगे। एक या अधिक तत्वों का चयन करने का एक तरीका उनकी आईडी और/या वर्ग विशेषताओं द्वारा है।

जैसे ही आप इस ट्यूटोरियल को पढ़ते हैं, इंटरैक्टिव कोडपेन चेकआउट करें और बस मेरे साथ खेलें!

आईडी विशेषता और सीएसएस चयनकर्ता

चलिए आगे बढ़ते हैं और

टैग:

 

 इस पैराग्राफ को कलर करें! 
 

 एक आईडी एक विशिष्ट पहचानकर्ता है जिसे आप विशिष्ट रूप से पहचानने के लिए किसी एक तत्व को जोड़ते हैं। यह कन्वेंशन आईडी =“# NAME” का अनुसरण करता है। 
 

 इसे ध्यान में रखते हुए, और चूंकि हम अपने अनुच्छेद को रंगना चाहते हैं, आइए इसे एक अद्वितीय नाम से नाम दें। 
 
 
 
 इस पैराग्राफ को कलर करें! 
 

 अब जब हमारे पास अपना आईडी विशिष्ट पहचानकर्ता है, तो हमें यह सुनिश्चित करने की आवश्यकता है कि हम उसी आईडी को किसी अन्य तत्व में न जोड़ें। जबकि ब्राउज़र शिकायत नहीं करेगा, यह उद्देश्य खो देगा और सीएसएस इरादा के अनुसार काम नहीं करेगा।
 

 हमारी आईडी के साथ, हम हैशटैग प्रतीक # का उपयोग करके सीएसएस के साथ इसका चयन कर सकते हैं। आइए अपने p टैग को पर्पल बनाएं:
 
 
#पैराग्राफ के रंग का { रंग:बैंगनी;}
 

 आसान-पेसी है ना? 😄
 

 81% प्रतिभागियों ने कहा कि बूटकैंप में भाग लेने के बाद उन्हें अपनी तकनीकी नौकरी की संभावनाओं के बारे में अधिक आत्मविश्वास महसूस हुआ। आज ही एक बूटकैंप से मिलान करें।
 

 बूटकैंप शुरू करने से लेकर अपनी पहली नौकरी खोजने तक, औसत बूटकैंप ग्रेड ने करियर संक्रमण में छह महीने से भी कम समय बिताया।
 
वर्ग विशेषता और उसका CSS चयनकर्ता 
 

 कूल हमारे पास बैंगनी रंग के टेक्स्ट के साथ हमारा पैराग्राफ है। आइए अब मान लें कि हमारे सिंगल पी टैग के नीचे हमारे पास एवोकाडोस छवियों का एक गुच्छा है:
 
 
  

 हम इन सभी एवोकैडो-डेवलपर्स (जो भी इसका मतलब है) की पहचान और चयन कैसे कर सकते हैं? हम जानते हैं कि हम आईडी टैग का उपयोग नहीं कर सकते हैं, क्योंकि इसका उपयोग किसी एक आइटम की विशिष्ट रूप से पहचान करने के लिए किया जाता है। यह वह जगह है जहाँ वर्ग विशेषता काम करती है।
 

 वर्ग विशेषता सम्मेलन वर्ग =”#CLASS_NAME” का अनुसरण करती है। चूंकि कई सदस्य एक वर्ग से संबंधित हो सकते हैं, हमारे सभी एवोकैडो डेवलपर्स को एक वर्ग सौंपा जा सकता है जैसे:
 
 
 

 महान! हमारी एवोकैडो छवियों को "एवोकैडो-देव" वर्ग सौंपा गया है। अब हम CSS वर्ग चयनकर्ता का उपयोग कर सकते हैं जिसे एक साधारण बिंदु (.) द्वारा दर्शाया जाता है। आइए आगे बढ़ते हैं और हमारे एवोकैडो देवों में CSS फ़िल्टर गुण जोड़ते हैं। हम मान लेंगे कि वे देर रात तक काम कर रहे हैं तो चलिए उनके रंग को 100 प्रतिशत उलट देते हैं। 
 
 
.avocado-devs { filter:invert(100)}
 

 कक्षाओं के साथ हम मूल रूप से समूह बनाते हैं और फिर सीएसएस वर्ग चयनकर्ता के साथ हम शैलियों को लागू कर सकते हैं जैसे हम तत्वों के समूह के लिए चाहते हैं।
 
क्लास चयनकर्ताओं के साथ जेनेरिक टैग चयनकर्ताओं का उपयोग करना 
 

 हम अक्सर देखते हैं कि सीएसएस के साथ कक्षाओं का चयन करते समय डॉट चयनकर्ता के साथ जेनेरिक टैग चयनकर्ताओं का उपयोग करना बेहतर होता है। क्यों? क्योंकि अधिक विशिष्ट हम अपने चयनकर्ताओं के साथ हैं, हमारा सीएसएस बेहतर तरीके से लागू होगा।
 

 CSS के साथ, हम जेनेरिक टैग चयनकर्ताओं का उपयोग टैग नाम से काफी हद तक करते हैं। तो उदाहरण के लिए ये सभी मान्य टैग चयनकर्ता हैं:
 
 
/* H1 */ h1{}/* पैराग्राफ */ p{ }
 

 इसलिए हम img . को शामिल करके अपने इमेज सिलेक्टर को रिफलेक्टर कर सकते हैं सामान्य टैग:
 
img.avocado-devs { filter:invert(100)}
 

 कार्यक्षमता नहीं बदली है, लेकिन जैसे-जैसे आपका कोड बढ़ता है यह विशिष्टता महत्वपूर्ण है। यह आपके कोड को और अधिक पठनीय बना देगा। अन्य डेवलपर देखेंगे कि एवोकाडो-देव वर्ग एक छवि को संदर्भित करता है।
 

 यह महत्वपूर्ण है क्योंकि यहां हम केवल उन छवियों पर फ़िल्टर लागू करते हैं जिनमें विशिष्ट वर्ग का नाम होता है। अगर हम उपयुक्त वर्ग के बिना एक और एवोकैडो-देव छवि जोड़ना चाहते हैं तो शैली लागू नहीं होगी। वेब डेवलपर के रूप में यह सशर्त व्यवहार अक्सर वही होता है जो हम चाहते हैं।