CSS ID बनाम क्लास: मुख्य अंतर समझाया गया

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

CSS में, सिलेक्टर्स का उपयोग किसी वेब पेज पर एक विशिष्ट एलिमेंट या एलिमेंट्स की श्रृंखला को लक्षित करने के लिए किया जाता है। एक बार एलिमेंट लक्षित हो जाने पर, उस एलिमेंट पर एक स्टाइल या स्टाइल्स का सेट लागू किया जा सकता है।

उपलब्ध सिलेक्टर्स की एक विस्तृत श्रृंखला है। दो सबसे अधिक उपयोग किए जाने वाले class और ID हैं। दोनों का उपयोग उन एलिमेंट्स को लक्षित करने के लिए किया जाता है जिन पर स्टाइल लागू किया जाना चाहिए।

CSS क्लास बनाम ID सिलेक्टर्स

class और ID सिलेक्टर्स में क्या अंतर है? यह CSS में नए कई डेवलपर्स द्वारा पूछा जाने वाला एक सवाल है, और जिसका जवाब हम इस गाइड में देंगे।

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

CSS सिलेक्टर्स

वेब पेज डिजाइन करते समय, आप चाहेंगे कि कुछ स्टाइल्स पेज पर विशिष्ट एलिमेंट्स पर लागू हों। उदाहरण के लिए, आप सभी <p> टैग्स का टेक्स्ट कलर हरा सेट करना चाह सकते हैं या हेडर का फॉन्ट साइज बदलना चाह सकते हैं।

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

दो सिलेक्टर्स, class और id, का उपयोग क्रमशः HTML एलिमेंट को असाइन की गई क्लास और ID के आधार पर एलिमेंट्स पर स्टाइल्स लागू करने के लिए किया जाता है। लेकिन ये सिलेक्टर्स अक्सर भ्रमित होते हैं, तो आइए देखते हैं कि प्रत्येक कैसे काम करता है।

ID सिलेक्टर अद्वितीय है

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

ID सिलेक्टर्स को हैश साइन का उपयोग करके परिभाषित किया जाता है। इसके तुरंत बाद वह ID मान होता है जिस पर आप स्टाइल नियमों का एक सेट लागू करना चाहते हैं। यहां ID सिलेक्टर का एक उदाहरण दिया गया है:

<html> <p id="betaBanner">यह एक बैनर है।</p> <style> #betaBanner { color: white; background-color: orange; }

यह स्टाइल हमारे HTML डॉक्यूमेंट में betaBanner ID वाले <p> एलिमेंट पर लागू होता है। स्टाइल एलिमेंट के बैकग्राउंड कलर को नारंगी और एलिमेंट में टेक्स्ट के कलर को सफेद सेट करेगा।

क्लास सिलेक्टर अद्वितीय नहीं है

एक क्लास सिलेक्टर आपको स्टाइल नियमों को परिभाषित करने की अनुमति देता है जो किसी भी एलिमेंट पर लागू होते हैं जिसका क्लास एट्रिब्यूट एक निश्चित मान के बराबर होता है।

जैसा कि हमने पहले चर्चा की, ID सिलेक्टर का उपयोग केवल एक एलिमेंट को स्टाइल करने के लिए किया जा सकता है। ऐसा इसलिए है क्योंकि ID का उपयोग वेब पेज पर केवल एक बार किया जा सकता है। दूसरी ओर, क्लासेज का उपयोग कई एलिमेंट्स पर किया जा सकता है। इसलिए, यदि आप क्लास सिलेक्टर का उपयोग करके स्टाइल लागू करते हैं, तो उस क्लास को साझा करने वाला कोई भी एलिमेंट आपके द्वारा परिभाषित स्टाइल्स के अधीन होगा।

क्लास सिलेक्टर्स को एक पीरियड का उपयोग करके परिभाषित किया जाता है, जिसके बाद उस क्लास का मान होता है जिस पर आप स्टाइल्स का एक सेट लागू करना चाहते हैं। यहां क्लास सिलेक्टर का एक उदाहरण दिया गया है:

<html> <p class="orangeBackground">यह एक बैनर है।</p> <div class="orangeBackground">यह एक बैनर है।</div> <style> .orangeBackground { background-color: orange; }

यह स्टाइल हमारे <p> टैग के बैकग्राउंड कलर को नारंगी सेट करता है। इसके अलावा, स्टाइल हमारे <div> टैग के बैकग्राउंड कलर को नारंगी सेट करता है। ऐसा इसलिए है क्योंकि दोनों टैग्स एक ही क्लास नाम साझा करते हैं: orangeBackground।

इसके अलावा, एक वेब एलिमेंट कई अलग-अलग क्लासेज साझा कर सकता है। इसलिए, यदि हम अपने ऊपर के <div> टैग पर large नामक एक क्लास लागू करना चाहते हैं, तो हम इस कोड का उपयोग करके ऐसा कर सकते हैं:

<html> <div class="orangeBackground large">यह एक बैनर है।</div>

इस कोड में, orangeBackground और large क्लासेज के लिए परिभाषित कोई भी स्टाइल नियम हमारे वेब एलिमेंट पर लागू होते हैं। दूसरी ओर, एक ID के साथ, हम इस व्यवहार को दोहरा नहीं सकते, क्योंकि प्रत्येक एलिमेंट में केवल एक ID हो सकती है।

IDs का एक अद्वितीय ब्राउज़र फ़ंक्शन होता है

अब तक, हमने इस तथ्य पर चर्चा की है कि IDs केवल एक एलिमेंट पर स्टाइल लागू कर सकते हैं। क्लासेज के विपरीत जो कई एलिमेंट्स पर स्टाइल लागू कर सकते हैं। यह क्लास और ID सिलेक्टर्स के बीच एकमात्र अंतर नहीं है।

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

यदि आप किसी एलिमेंट को एक ID असाइन करते हैं, तो आप उस एलिमेंट से सीधे लिंक करने के लिए एक विशेष URL का उपयोग कर सकते हैं। यह व्यवहार इसलिए काम करता है क्योंकि IDs एक वेब पेज पर अद्वितीय होते हैं।

मान लीजिए हम अपनी वेबसाइट का एक लिंक भेजना चाहते थे जो उपयोगकर्ता को स्वचालित रूप से एक हेडर पर स्क्रॉल करता है। हम निम्न कोड का उपयोग करके ऐसा कर सकते हैं:

<h3 id="section3">सेक्शन थ्री</h3>

इस कोड में, हमने <h3> टैग को एक ID असाइन की है जिसमें टेक्स्ट सेक्शन थ्री है। अब, हम एक उपयोगकर्ता को एक डायरेक्ट लिंक भेज सकते हैं जो उन्हें वेब पेज पर उस एलिमेंट पर स्क्रॉल करता है। यह निम्न URL का उपयोग करके किया जाता है:

https://domain.com/index.html#section3

जब कोई उपयोगकर्ता इस URL पर नेविगेट करता है (जहां domain.com आपकी वेबसाइट का URL है), तो वे section3 ID वाले हेडिंग पर स्क्रॉल करेंगे। यह व्यवहार क्लासेज पर लागू नहीं होता।

IDs का उपयोग JavaScript द्वारा किया जाता है

यदि आपको JavaScript का उपयोग करने का कोई अनुभव है, तो आप जानते होंगे कि IDs आमतौर पर उस प्रोग्रामिंग भाषा में उपयोग किए जाते हैं। getElementById फ़ंक्शन आपको वेब पेज पर एक एलिमेंट को चुनने की अनुमति देता है। यह इस तथ्य पर निर्भर करता है कि केवल एक एलिमेंट एक ही ID साझा कर सकता है।

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

आप ID और CSS क्लास सिलेक्टर्स दोनों का उपयोग कर सकते हैं

HTML में ऐसा कोई नियम नहीं है जो आपको किसी एलिमेंट को एक ID और एक क्लास दोनों असाइन करने से रोकता हो।

"करियर कर्मा मेरे जीवन में तब आया जब मुझे इसकी सबसे अधिक आवश्यकता थी और इसने मुझे जल्दी से एक बूटकैंप से मिलाने में मदद की। स्नातक होने के दो महीने बाद, मुझे अपने मूल्यों और जीवन में लक्ष्यों के अनुरूप अपनी ड्रीम जॉब मिल गई!"

वीनस, रॉकबॉट में सॉफ्टवेयर इंजीनियर

अपना बूटकैंप मैच खोजें

मान लीजिए आप backgroundOrange नामक क्लास से जुड़े स्टाइल्स को एक <div> टैग पर लागू करना चाहते हैं। हालाँकि, आप <div> पर कुछ अद्वितीय स्टाइल्स भी लागू करना चाहते हैं। आप निम्न कोड का उपयोग करके ऐसा कर सकते हैं:

<div class="backgroundOrange" id="customDiv"></div>

यह <div> टैग क्लास backgroundOrange के स्टाइल्स के अधीन होगा। इसके अलावा, यह ID सिलेक्टर का उपयोग करके customDiv ID पर लागू स्टाइल्स का भी उपयोग करेगा।

निष्कर्ष

जब आप CSS के साथ काम कर रहे होते हैं, तो ID को क्लास पर प्राथमिकता देने के लिए कोई विशिष्ट कारण नहीं होते। हालांकि, यह सर्वोत्तम अभ्यास है कि IDs का उपयोग केवल तभी करें जब आप चाहते हैं कि स्टाइल वेब पेज पर एक एलिमेंट पर लागू हो, और क्लासेज का उपयोग तब करें जब आप चाहते हैं कि स्टाइल कई एलिमेंट्स पर लागू हो।

इस ट्यूटोरियल में, हमने उदाहरणों के साथ संदर्भ में, CSS ID और क्लास सिलेक्टर्स की मूल बातें चर्चा की, और दोनों की तुलना और अंतर किया। अब आप एक विशेषज्ञ डेवलपर की तरह CSS ID और क्लास सिलेक्टर्स का उपयोग शुरू करने के लिए तैयार हैं!