सीएसएस आईडी बनाम क्लास:मुख्य अंतर समझाया गया

<पी> सीएसएस क्लास बनाम आईडी की तुलना करते समय, अंतर यह है कि सीएसएस क्लास कई तत्वों पर एक शैली लागू करता है। दूसरी ओर, आईडी एक अद्वितीय तत्व पर एक शैली लागू करती है। आईडी इस मायने में भी खास है कि आप किसी तत्व से सीधे लिंक करने के लिए एक विशेष यूआरएल का उपयोग कर सकते हैं और इसका उपयोग जावास्क्रिप्ट द्वारा किया जाता है। <पी> सीएसएस में, चयनकर्ताओं का उपयोग वेब पेज पर किसी विशिष्ट तत्व या तत्वों की श्रेणी को लक्षित करने के लिए किया जाता है। एक बार किसी तत्व को लक्षित करने के बाद, उस तत्व पर एक शैली या शैलियों का सेट लागू किया जा सकता है। <पी> चयनकर्ताओं की एक विस्तृत श्रृंखला उपलब्ध है। इनमें से दो सबसे अधिक उपयोग किए जाते हैं class और ID . दोनों का उपयोग उन तत्वों को लक्षित करने के लिए किया जाता है जिन पर एक शैली लागू की जानी चाहिए।

सीएसएस क्लास बनाम आईडी चयनकर्ता

<पी> class में क्या अंतर है? और ID चयनकर्ता? यह कई डेवलपर्स द्वारा पूछा गया प्रश्न है जो सीएसएस में नए हैं, और हम इस गाइड में इसका उत्तर देने जा रहे हैं। <पी> इस गाइड को पढ़ने के अंत तक, आपको इन दोनों चयनकर्ताओं के बीच अंतर पता चल जाएगा। आपके कोड में किस चयनकर्ता का उपयोग करना है, इसके बारे में सूचित निर्णय लेने के लिए आपके पास आवश्यक जानकारी होगी। आएँ शुरू करें।

सीएसएस चयनकर्ता

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

टैग के टेक्स्ट का रंग हरा सेट करना चाहें या हेडर का फ़ॉन्ट आकार बदलना चाहें। <पी> चयनकर्ता आपको वेब पेज पर विशिष्ट तत्वों को लक्षित करने की अनुमति देते हैं जिन पर आप शैलियाँ लागू कर सकते हैं। सीएसएस में, कई चयनकर्ता उपलब्ध हैं, जैसे सार्वभौमिक चयनकर्ता, वंशज चयनकर्ता, बाल चयनकर्ता और समूह चयनकर्ता। यदि आप सीएसएस चयनकर्ताओं के बारे में अधिक जानने में रुचि रखते हैं, तो सीएसएस चयनकर्ताओं के लिए हमारी शुरुआती मार्गदर्शिका पढ़ें। <पी> दो चयनकर्ता, class और id , का उपयोग क्रमशः HTML तत्व को निर्दिष्ट वर्ग और आईडी के आधार पर तत्वों पर शैलियों को लागू करने के लिए किया जाता है। लेकिन ये चयनकर्ता अक्सर भ्रमित रहते हैं, तो आइए देखें कि प्रत्येक कैसे काम करता है।

आईडी चयनकर्ता अद्वितीय है

<पी> आईडी चयनकर्ता आपको शैली नियमों को परिभाषित करने की अनुमति देता है जो एकल पर लागू होते हैं वेब पेज पर तत्व. प्रत्येक वेब पेज में एकल आईडी विशेषता वाला केवल एक तत्व हो सकता है। इसका मतलब यह है कि आईडी चयनकर्ता का उपयोग कभी भी एक से अधिक तत्वों को स्टाइल करने के लिए नहीं किया जा सकता है। <पी> आईडी चयनकर्ताओं को हैश चिह्न का उपयोग करके परिभाषित किया गया है। उनके तुरंत बाद वह आईडी मान आ जाता है जिस पर आप शैली नियमों का एक सेट लागू करना चाहते हैं। यहां क्रियाशील आईडी चयनकर्ता का एक उदाहरण दिया गया है:

<html>
<p id="betaBanner">This is a banner.</p>
<style>
#betaBanner {
 color: white;
 background-color: orange;
}

<पी> यह शैली हमारे HTML दस्तावेज़ में आईडी betaBanner के साथ

तत्व पर लागू होती है . शैली तत्व की पृष्ठभूमि का रंग नारंगी और तत्व में पाठ का रंग सफेद पर सेट करेगी।

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

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

<html>
<p class="orangeBackground">This is a banner.</p>
<div class="orangeBackground">This is a banner.</div>
<style>
.orangeBackground {
 background-color: orange;
}

<पी> यह शैली हमारे

टैग का पृष्ठभूमि रंग नारंगी पर सेट करती है। इसके अलावा, शैली हमारे

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

टैग के लिए, हम इस कोड का उपयोग करके ऐसा कर सकते हैं:

<html>
<div class="orangeBackground large">This is a banner.</div>

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

आईडी में एक अद्वितीय ब्राउज़र फ़ंक्शन होता है

<पी> अब तक, हमने इस तथ्य पर चर्चा की है कि आईडी केवल एक तत्व पर शैलियों को लागू कर सकती हैं। उन वर्गों के विपरीत जो कई तत्वों पर शैलियाँ लागू कर सकते हैं। यह वर्ग और आईडी चयनकर्ताओं के बीच एकमात्र अंतर नहीं है। <पी> ब्राउज़र में, कक्षाओं का कोई विशेष कार्य नहीं होता है। उनका मुख्य उद्देश्य आपको वेब पेज पर विभिन्न तत्वों पर शैलियाँ लागू करने की अनुमति देना है। दूसरी ओर, आईडी का उपयोग ब्राउज़र द्वारा वेब पेज के एक निश्चित हिस्से पर नेविगेट करने के लिए किया जा सकता है। <पी> यदि आप किसी तत्व को एक आईडी निर्दिष्ट करते हैं, तो आप उस तत्व से सीधे लिंक करने के लिए एक विशेष यूआरएल का उपयोग कर सकते हैं। यह व्यवहार इसलिए काम करता है क्योंकि किसी वेब पेज पर आईडी अद्वितीय होती हैं। <पी> मान लीजिए कि हम अपनी वेबसाइट पर एक लिंक भेजना चाहते हैं जो उपयोगकर्ता को स्वचालित रूप से हेडर तक स्क्रॉल करता है। हम इस कोड का उपयोग करके ऐसा कर सकते हैं:

<h3 id="section3">Section Three</h3>

<पी> इस कोड में, हमने

टैग को एक आईडी सौंपी है जिसमें टेक्स्ट `Section Three` है . अब, हम उपयोगकर्ता को एक सीधा लिंक भेज सकते हैं जो उन्हें वेब पेज पर उस तत्व तक स्क्रॉल करता है। यह निम्नलिखित URL का उपयोग करके किया जाता है:
<पी> https://domain.com/index.html#section3
<पी> जब कोई उपयोगकर्ता इस यूआरएल पर नेविगेट करता है, (जहां domain.com आपकी वेबसाइट का यूआरएल है), वे आईडी सेक्शन3 के साथ शीर्षक पर स्क्रॉल करेंगे . यह व्यवहार कक्षाओं पर लागू नहीं होता.

आईडी का उपयोग जावास्क्रिप्ट द्वारा किया जाता है

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

आप आईडी और सीएसएस क्लास चयनकर्ताओं दोनों का उपयोग कर सकते हैं

<पी> HTML में ऐसा कोई नियम नहीं है जो आपको एक तत्व को आईडी और क्लास दोनों निर्दिष्ट करने से रोकता हो।

<पी>

सीएसएस आईडी बनाम क्लास:मुख्य अंतर समझाया गया

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

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

<पी> अपना बूटकैंप मैच ढूंढें

<पी> मान लीजिए आप backgroundOrange नामक वर्ग से संबद्ध शैलियों को लागू करना चाहते हैं एक

टैग के लिए। हालाँकि, आप

पर कुछ अनूठी शैलियाँ भी लागू करना चाहते हैं। आप इस कोड का उपयोग करके ऐसा कर सकते हैं:

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

<पी> यह

टैग backgroundOrange वर्ग की शैलियों के अधीन होगा . इसके अलावा, यह customDiv पर लागू शैलियों का भी उपयोग करेगा आईडी चयनकर्ता का उपयोग कर आईडी।

निष्कर्ष

<पी> जब आप सीएसएस के साथ काम कर रहे होते हैं, तो आपको किसी कक्षा में आईडी का उपयोग करने के लिए मजबूर करने का कोई विशेष कारण नहीं होता है। हालाँकि, यदि आप वेब पेज पर एक तत्व पर एक शैली लागू करना चाहते हैं तो केवल आईडी का उपयोग करना और यदि आप कई तत्वों पर एक शैली लागू करना चाहते हैं तो कक्षाओं का उपयोग करना सबसे अच्छा अभ्यास है।

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