आईडी और क्लास में क्या अंतर है?

Question

CSS में क्या अंतर है <div class="">और <div id="">कब आता है? क्या इसका उपयोग करना ठीक है <div id="">?

मैं अलग-अलग डेवलपर्स को दोनों तरीकों से ऐसा करते देखता हूं, और जब से मैं स्वयं पढ़ाया जाता हूं, मैंने वास्तव में कभी भी इसका पता नहीं लगाया है।

Answer 1

idsअद्वितीय होना चाहिए जहां classकई चीजों पर लागू किया जा सकता है। CSS में, idजैसे दिखते हैं #elementIDऔर classतत्व जैसे दिखते हैं.someClass

सामान्य तौर पर, idजब भी आप किसी विशिष्ट तत्व को संदर्भित करना चाहते हैं और classजब आपके पास सभी चीजें समान हों, तब उपयोग करें। उदाहरण के लिए, आम idतत्वों तरह बातें कर रहे हैं header, footer, sidebar। आम classतत्व जैसी चीजें highlightया हैं external-link।

कैस्केड पर पढ़ना और विभिन्न चयनकर्ताओं को सौंपी गई वरीयता को समझना एक अच्छा विचार है: http://www.w3.org/TR/CSS2/cascade.html

हालांकि, आपको जो सबसे बुनियादी मिसाल समझनी चाहिए, वह यह है कि idचयनकर्ता चयनकर्ताओं पर पूर्वता classबरतें। यदि आपके पास यह था:

<p id="intro" class="foo">Hello!</p>

तथा:

#intro { color: red }
.foo { color: blue }

पाठ लाल होगा क्योंकि idचयनकर्ता चयनकर्ता पर पूर्वता लेता है class।

Comments

कारण, देखभाल करने वालों के लिए, कि #intro में पूर्वता है क्योंकि विशिष्टता नाम की कोई चीज है: w3.org/TR/CSS2/cascade.html#specificity

— Glen Solsberry

टीबीएच, कोई भी आईडी का उपयोग नहीं करता है जब तक कि इसका जावास्क्रिप्ट के साथ एकीकरण के साथ कुछ नहीं करना है (जब आपको एक अद्वितीय मूल्य की आवश्यकता होती है)। यह html बचे हुए हैं और आपको इसका उपयोग करने की आवश्यकता नहीं है क्योंकि यह मौजूद है। यह कहना कि आपके पास केवल एक हेडर है और ऐसे में आपको कक्षा के बजाय आईडी की आवश्यकता है जो सही हो सकता है। लेकिन मान लीजिए कि आपके पास शैली गुणों के साथ एक खोज पट्टी है। यदि आप पृष्ठ के अंत में समान गुणों के साथ एक और खोज पट्टी जोड़ना चाहते हैं तो बाद में भी आप नहीं कर सकते, क्योंकि आईडी का उपयोग केवल एक बार किया जा सकता है। ईमानदारी से, मैं अभी आईडी का कोई उपयोग नहीं देखता हूं। यह आपके कोड को अधिक संगठित या कुछ भी नहीं बनाता है।

— हीरोइन

बस इन दोनों चीजों को काफी लंबे समय तक भ्रमित किया। अब मैं समझ गया कि "आईडी" को अद्वितीय तत्व के साथ संदर्भित किया जाना चाहिए जबकि "वर्ग" को उनके अंतर के अनुसार कई तत्वों या चीजों में लागू किया जा सकता है

— माइकल लाइ

मैं इस तरह से आईडी देखना पसंद करते हैं: यदि आप कई तत्व है जो (जैसे एक जैसे हैं है <li>एक में <ul>) और आप एक करना चाहते हैं एक अलग (चाहे सीएसएस या जे एस फर्क नहीं पड़ता) व्यवहार करने के लिए उन में से एक है, तो आप का उपयोग idविशेषता ।

— zen

ID एक पहचानकर्ता है, CLASS स्टाइल नियमों की एक सूची है, वे अलग-अलग उद्देश्यों के लिए मौजूद हैं

— Daniel Faure

Answer 2

शायद एक समानता अंतर को समझने में मदद करेगी:

<student id="JonathanSampson" class="Biology Calculus" />
<student id="MarySmith" class="Biology Networking" />

छात्र आईडी कार्ड अलग हैं। कैंपस में किसी भी दो छात्रों के पास एक ही छात्र आईडी कार्ड नहीं होगा। हालांकि, कई छात्र एक दूसरे के साथ कम से कम एक कक्षा साझा कर सकते हैं और करेंगे ।

जीव विज्ञान जैसे एक कक्षा के शीर्षक के तहत कई छात्रों को रखना ठीक है । लेकिन कई छात्रों को एक छात्र आईडी के तहत रखना कभी भी स्वीकार्य नहीं है ।

जब दे रही है नियम स्कूल इंटरकॉम प्रणाली पर, आप दे सकते हैं नियम एक करने के लिए कक्षा :

"कल, सभी छात्रों को जीव विज्ञान वर्ग के लिए एक लाल शर्ट पहनना है।"

.Biology {
  color: red;
}

या आप विशिष्ट छात्र को उसकी विशिष्ट आईडी पर कॉल करके नियम दे सकते हैं :

"जोनाथन सैम्पसन को कल हरे रंग की शर्ट पहननी है।"

#JonathanSampson {
  color: green;
}

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

अधिक विशिष्ट चयनकर्ता जीतते हैं।

Comments

भ्रामक हो सकता है। आप एक ही पृष्ठ पर नहीं हो सकते<student id="JonathanSampson" class="Physics" />

— ल्यूक एम

@LucM क्यों नहीं? <div id="SomeId" class="SomeClass"></div>पूरी तरह से वैध है

— बेसिक

@Basic id एक पेज पर uniq होनी चाहिए। आपके पास नहीं हो सकता है <student id="JonathanSampson" class="Biology" />और<student id="JonathanSampson" class="Physics" />

— लुक एम

@ LucM मैंने आपकी बात को गलत समझा - काफी सही है, आईडी को यूनिक होना चाहिए, लेकिन आप ऐसा कर सकते हैं<student id="JonathanSampson" class="Biology Physics" />

— बेसिक

Answer 3

कहाँ एक वर्ग बनाम एक आईडी का उपयोग करने के लिए

दोनों के बीच साधारण अंतर यह है कि जब किसी पृष्ठ पर एक कक्षा का बार-बार उपयोग किया जा सकता है, तो एक आईडी का उपयोग प्रति पृष्ठ केवल एक बार किया जाना चाहिए। इसलिए, div तत्व पर एक आईडी का उपयोग करना उचित है जो पृष्ठ पर मुख्य सामग्री को चिह्नित कर रहा है, क्योंकि केवल एक मुख्य सामग्री अनुभाग होगा। इसके विपरीत, आपको एक टेबल पर वैकल्पिक पंक्ति रंगों को सेट करने के लिए एक वर्ग का उपयोग करना चाहिए, क्योंकि वे परिभाषा से एक से अधिक बार उपयोग किए जाने वाले हैं।

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

Answer 4

पूरे पेज में एक आईडी होना चाहिए।

एक वर्ग कई तत्वों पर लागू हो सकता है।

कभी-कभी, आईडी का उपयोग करना एक अच्छा विचार है।

एक पृष्ठ में, आप आमतौर पर एक पाद लेख, एक शीर्ष लेख ...

फिर पाद एक आईडी के साथ एक div में हो सकता है

<div id = "footer" class = "...">

और अभी भी एक वर्ग है

Answer 5

एक CLASS का उपयोग कई तत्वों के लिए किया जाना चाहिए, जिनके लिए आप एक ही स्टाइल चाहते हैं। एक आईडी एक अद्वितीय तत्व के लिए होनी चाहिए। इस ट्यूटोरियल देखें ।

यदि आप एक सख्त अनुरूप बनना चाहते हैं, या यदि आप चाहते हैं कि आपके पृष्ठ मानकों के अनुसार मान्य हों, तो आपको W3C मानकों का उल्लेख करना चाहिए ।

Answer 6

आईडी अद्वितीय हैं। कक्षाएं नहीं हैं। तत्वों में कई वर्ग भी हो सकते हैं। इसके अलावा वर्गों को गतिशील रूप से जोड़ा जा सकता है और एक तत्व में हटाया जा सकता है।

कहीं भी आप एक आईडी का उपयोग कर सकते हैं जिसके बजाय आप एक वर्ग का उपयोग कर सकते हैं। उलटा सच नहीं है।

ऐसा लगता है कि यह कन्वेंशन उन पृष्ठ तत्वों के लिए आईडी का उपयोग करता है जो हर पृष्ठ पर हैं (जैसे "नेवबर" या "मेनू") और बाकी सभी चीज़ों के लिए कक्षाएं लेकिन यह केवल कन्वेंशन है और आपको उपयोग में विस्तृत विचरण मिलेगा।

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

आईडी द्वारा गए वर्षों में भी पसंद किए गए क्योंकि वे जावास्क्रिप्ट (getElementById) में आसानी से सुलभ हैं। JQuery और अन्य जावास्क्रिप्ट फ्रेमवर्क के आगमन के साथ यह अब बहुत ज्यादा गैर-मुद्दा है।

Answer 7

कक्षाएं श्रेणियों की तरह हैं। कई HTML तत्व एक वर्ग के हो सकते हैं, और एक HTML तत्व एक से अधिक वर्ग हो सकते हैं। कक्षाओं का उपयोग सामान्य शैलियों या शैलियों को लागू करने के लिए किया जाता है जिन्हें कई HTML तत्वों में लागू किया जा सकता है।

आईडी पहचानकर्ता हैं। वे अद्वितीय हैं; किसी अन्य को उसी आईडी की अनुमति नहीं है। एक HTML तत्व के लिए अद्वितीय शैलियों को लागू करने के लिए आईडी का उपयोग किया जाता है।

मैं इस तरह से आईडी और कक्षाओं का उपयोग करता हूं:

<div id="header">
  <h1>I am a header!</h1>
  <p>I am subtext for a header!</p>
</div>
<div id="content">
  <div class="section">
    <p>I am a section!</p>
  </div>
  <div class="section special">
    <p>I am a section!</p>
  </div>
  <div class="section">
    <p>I am a section!</p>
  </div>
</div>

इस उदाहरण में, हेडर और कंटेंट सेक्शन को #header और #content के माध्यम से स्टाइल किया जा सकता है। सामग्री के प्रत्येक खंड को # कॉन्टेंट .section के माध्यम से एक सामान्य शैली लागू किया जा सकता है। बस किक के लिए, मैंने मध्य खंड के लिए एक "विशेष" वर्ग जोड़ा। मान लीजिए कि आप एक विशेष खंड को एक विशेष स्टाइल चाहते थे। यह .special वर्ग के साथ प्राप्त किया जा सकता है, फिर भी यह खंड अभी भी #content .section से सामान्य शैलियों को विरासत में मिला है।

जब मैं जावास्क्रिप्ट या सीएसएस विकास करता हूं, तो मैं आम तौर पर एक बहुत ही विशिष्ट एचटीएमएल तत्व को एक्सेस / हेरफेर करने के लिए आईडी का उपयोग करता हूं, और मैं कक्षाओं की एक विस्तृत श्रृंखला तक शैलियों को एक्सेस / लागू करने के लिए कक्षाओं का उपयोग करता हूं।

Answer 8

CSS ऑब्जेक्ट ओरिएंटेड है। आईडी कहती है उदाहरण, वर्ग कहता है कक्षा।

Answer 9

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

CSS को लागू करने के लिए कक्षाओं का उपयोग किया जाना चाहिए।

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

Comments

ट्विटर बूटस्ट्रैप इस सिद्धांत का उपयोग करता है - अर्थात कोई भी आईडी का उपयोग नहीं किया जाता है (v3.3)। यह एक अधिक चरम उदाहरण है क्योंकि उन्हें अपने पुस्तकालय को यथासंभव सामान्य होने की आवश्यकता है। यह केवल कक्षाओं का उपयोग करने का लाभ दिखाता है - जो कि आप इसे कम बदलाव के साथ कई और साइटों पर लागू कर सकते हैं

— icc97

Answer 10

CSS चयनकर्ता स्थान वास्तव में सशर्त आईडी शैली के लिए अनुमति देता है:

h1#my-id {color:red}
p#my-id {color:blue}

उम्मीद के अनुसार प्रस्तुत करना होगा। आप ऐसा क्यों करेंगे? कभी-कभी आईडी गतिशील रूप से उत्पन्न होती हैं, आदि एक उच्च-स्तरीय आईडी असाइनमेंट के आधार पर शीर्षकों को अलग-अलग रेंडर करने के लिए एक और उपयोग किया गया है:

body#list-page #title {font-size:56px}
body#detail-page #title {font-size:24px}

व्यक्तिगत रूप से, मैं लंबे समय तक क्लासनेम चयनकर्ताओं को पसंद करता हूं:

body#list-page .title-block > h1 {font-size:56px}

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

अंत में, जब चयनकर्ता प्रदर्शन और पूर्वता की बात आती है, तो आईडी जीत जाता है। यह एक अन्य विषय है।

Answer 11

किसी भी तत्व में एक वर्ग या एक आईडी हो सकता है।

एक वर्ग का उपयोग एक निश्चित प्रकार के प्रदर्शन को संदर्भित करने के लिए किया जाता है, उदाहरण के लिए आपके पास एक div के लिए एक css वर्ग हो सकता है जो इस प्रश्न के उत्तर का प्रतिनिधित्व करता है। जैसा कि कई उत्तर होंगे, कई डिवीजनों को एक ही स्टाइल की आवश्यकता होगी और आप एक वर्ग का उपयोग करेंगे।

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

तकनीकी रूप से आप सभी के लिए कक्षाओं का उपयोग कर सकते हैं, या उन्हें तार्किक रूप से विभाजित कर सकते हैं। हालांकि, आप कई तत्वों के लिए आईडी का पुन: उपयोग नहीं कर सकते।

Answer 12

क्लास अपनी शैली को तत्वों के समूह में लागू करने के लिए है। आईडी शैलियों उस आईडी के साथ सिर्फ तत्व पर लागू होती है (केवल एक होना चाहिए)। आमतौर पर आप कक्षाओं का उपयोग करते हैं, लेकिन यदि एक-बंद है तो आप आईडी का उपयोग कर सकते हैं (या बस सीधे तत्व में स्टाइल छड़ी कर सकते हैं)।

Answer 13

उन्नत विकास आईडी में हम मूल रूप से जावास्क्रिप्ट का उपयोग कर सकते हैं।

दोहराए जाने वाले उद्देश्यों के लिए, वर्ग आईडी आईडी के विपरीत काम करता है जो अद्वितीय माना जाता है।

नीचे दिए गए भावों को दर्शाने वाला एक उदाहरण है:

<div id="box" class="box bg-color-red">this is a box</div>
<div id="box1" class="box bg-color-red">this is a box</div>

अब आप यहां देख सकते हैं boxऔर box1दो (2) अलग-अलग <div>तत्व हैं, लेकिन हम उन दोनों को boxऔर bg-color-redकक्षाओं को लागू कर सकते हैं।

अवधारणा एक ओओपी भाषा में विरासत है ।

Answer 14

1) div आईडी पुन: प्रयोज्य नहीं है और इसे केवल HTML के एक तत्व पर लागू किया जाना चाहिए जबकि div वर्ग को कई तत्वों में जोड़ा जा सकता है।

2) एक आईडी का अधिक महत्व है यदि दोनों को एक ही तत्व पर लागू किया गया है और परस्पर विरोधी शैली है, तो आईडी की शैलियों को लागू किया जाएगा।

3) स्टाइल एलिमेंट हमेशा एक div क्लास लगाते हैं a। (डॉट) उनके नाम के सामने जबकि दिव्यांग वर्ग को उनके नामों के आगे # (हैश) लगाकर संदर्भित किया जाता है।

4) उदाहरण: -

<style>घोषणा में वर्ग -.red-background { background-color: red; }

<style>घोषणा में आईडी - #blue-background {background-color: blue;}

<div class="red-background" id="blue-background">Hello</div> यहां पृष्ठभूमि नीले रंग में होगी

Answer 15

idऔर classदो वैश्विक / मानक HTML विशेषता हैं (नीचे दी गई वैश्विक विशेषताएँ किसी भी HTML तत्व पर उपयोग की जा सकती हैं।)

class एक तत्व के लिए एक या अधिक वर्गनाम निर्दिष्ट करता है (एक शैली पत्रक में एक वर्ग को संदर्भित करता है)

id एक तत्व के लिए एक अद्वितीय आईडी निर्दिष्ट करता है

आईडी विशेषताएँ एक तत्व दस्तावेज़-व्यापी विशिष्ट पहचानकर्ता देती है जहाँ वर्ग विशेषता समान तत्वों को वर्गीकृत करने का एक तरीका प्रदान करती है।

आईडी विशेषता मान HTML पृष्ठ पर अद्वितीय होना चाहिए जहां वर्ग विशेषता का पुन: उपयोग किया जा सकता है जहां आप कभी भी समान गुण लागू करना चाहते हैं

Answer 16

क्लास का उपयोग उन कई तत्वों के लिए किया जाता है, जिनमें सामान्य विशेषताएँ होती हैं। यदि आप एक ही रंग और फ़ॉन्ट पी और बॉडी टैग दोनों का उपयोग करना चाहते हैं, तो क्लास विशेषता या किसी विभाजन में ही उपयोग करें।

दूसरी ओर आईडी का उपयोग किसी एकल तत्व विशेषताओं को हाइलाइट करने के लिए किया जाता है और विशेष रूप से केवल एक विशेष तत्व के लिए उपयोग किया जाता है। उदाहरण के लिए, हमारे पास कुछ विशेषताओं के साथ एक h1 टैग है, हम नहीं चाहेंगे कि वे पूरे पृष्ठ में किसी अन्य तत्वों में दोहराएं।

यह ध्यान दिया जाना चाहिए कि यदि हम एक तत्व में कक्षा और आईडी दोनों का उपयोग करते हैं, तो * आईडी गुण को प्रदर्शित करता है।

नीचे दिए गए उदाहरण को देखें

<html>
<head>
<style>
    #html_id{
        color:aqua;
        background-color: black;

    }
    .html_class{
        color:burlywood;
        background-color: brown;
    }
</style>

   </head>
    <body>
<p  class="html_class">Lorem ipsum dolor sit amet consectetur adipisicing 
   elit. 
    Perspiciatis a dicta qui unde veritatis cupiditate ullam quibusdam! 
     Mollitia enim, 
    nulla totam deserunt ex nihil quod, eaque, sed facilis quos iste.</p>
    </body>
   </html>

हम आउटपुट उत्पन्न करते हैं

उत्पादन