HTML => क्लासेस और आई.डी.

परिचय

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

वाक्य - विन्यास

क्लास = "क्लास 1 क्लास 2 क्लास 3"
id = "uniqueid"

पैरामीटर

पैरामीटर	विवरण
कक्षा	तत्व के वर्ग को दर्शाता है (गैर-अद्वितीय)
आईडी	तत्व की आईडी इंगित करता है (उसी संदर्भ में अद्वितीय)

टिप्पणियों

class और id दोनों वैश्विक गुण हैं, और इसलिए उन्हें किसी भी HTML तत्व को सौंपा जा सकता है।
कक्षा के नाम एक अक्षर (AZ या az) से शुरू होने चाहिए और अक्षर, अंक, हाइफ़न और अंडरस्कोर के बाद हो सकते हैं।
HTML5 , क्लास और आईडी विशेषताओं का उपयोग किसी भी तत्व पर किया जा सकता है। HTML 4.0.1 में, वे <base> , <head> , <html> , <meta> , <param> , <script> , <style> और <title> टैग से ऑफ-लिमिट थे।
एक तत्व में एक या अधिक वर्ग हो सकते हैं। कक्षाएं रिक्त स्थान से अलग हो जाती हैं और इसमें स्वयं रिक्त स्थान नहीं हो सकते।
एक तत्व में केवल एक आईडी हो सकती है और यह उसके संदर्भ (यानी एक वेबपेज) के भीतर अद्वितीय होनी चाहिए। आईडी में स्‍पेस भी सम्‍मिलित नहीं हो सकते।

एक तत्व एक वर्ग देता है

कक्षाएं उन तत्वों के लिए पहचानकर्ता हैं जिन्हें उन्हें सौंपा गया है। कक्षा को किसी तत्व को असाइन करने के लिए class विशेषता का उपयोग करें।

<div class="example-class"></div>

एक तत्व के लिए कई वर्गों को असाइन करने के लिए, वर्ग नामों को रिक्त स्थान के साथ अलग करें।

<div class="class1 class2"></div>

CSS में कक्षाओं का उपयोग करना

उस तरह के सभी तत्वों को बदले बिना कुछ तत्वों को स्टाइल करने के लिए कक्षाओं का उपयोग किया जा सकता है। उदाहरण के लिए, इन दो span तत्वों में पूरी तरह से अलग स्टाइलिंग हो सकती है:

<span></span>
<span class="special"></span>

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

उदाहरण के लिए, हमारे पास दो तत्व हैं, दोनों वर्ग highlight :

<div class="highlight">Lorem ipsum</div>
<span class="highlight">Lorem ipsum</span>

यदि हमारा CSS नीचे है, तो रंग हरे रंग के पाठ में दोनों तत्वों पर लागू होगा:

.highlight { color: green; }

हालाँकि, यदि हम केवल वर्ग highlight साथ div लक्ष्य बनाना चाहते highlight तो हम नीचे की तरह विशिष्टता जोड़ सकते हैं:

div.highlight { color: green; }

फिर भी, जब सीएसएस के साथ स्टाइल किया जाता है, तो आमतौर पर यह सिफारिश की जाती है कि कक्षाओं के साथ तत्वों (जैसे div.highlight ) के बजाय केवल कक्षाएं (जैसे .highlight ) का उपयोग किया जाए।

किसी भी अन्य चयनकर्ता के साथ, कक्षाओं को नेस्ट किया जा सकता है:

.main .highlight { color: red; } /* Descendant combinator */ 
.footer > .highlight { color: blue; } /* Child combinator */

आप कक्षा चयनकर्ता को केवल उन तत्वों को चुन सकते हैं जिनमें कई वर्गों का संयोजन है। उदाहरण के लिए, यदि यह हमारा HTML है:

<div class="special left menu">This text will be pink</div>

और हम इस विशिष्ट टुकड़े को गुलाबी रंग में रंगना चाहते हैं, हम अपने CSS में निम्न कार्य कर सकते हैं:

.special.left.menu { color: pink; }

एक तत्व एक आईडी दे रहा है

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

<div id="example-id"></div>

आपके पास एक ही दस्तावेज़ में एक ही आईडी के साथ दो तत्व नहीं होने चाहिए, भले ही विशेषताएँ दो अलग-अलग प्रकार के तत्वों से जुड़ी हों। उदाहरण के लिए, निम्न कोड गलत है:

<div id="example-id"></div>
<span id="example-id"></span>

ब्राउज़र इस कोड को प्रस्तुत करने के लिए अपना सर्वश्रेष्ठ प्रयास करेंगे, लेकिन सीएसएस के साथ स्टाइल करने या जावास्क्रिप्ट के साथ कार्यक्षमता जोड़ने पर अप्रत्याशित व्यवहार हो सकता है।

सीएसएस में अपनी आईडी द्वारा तत्वों को संदर्भित करने के लिए, # साथ आईडी को उपसर्ग करें।

#example-id { color: green; }

किसी दिए गए पृष्ठ पर एक आईडी के साथ एक तत्व में कूदने के लिए, URL में तत्व नाम के साथ # जोड़ें।

http://example.com/about#example-id

यह सुविधा अधिकांश ब्राउज़रों में समर्थित है और काम करने के लिए अतिरिक्त जावास्क्रिप्ट या सीएसएस की आवश्यकता नहीं है।

डुप्लिकेट आईडी से संबंधित समस्याएं

एक ही आईडी के साथ एक से अधिक तत्व होने से समस्या का निवारण करना कठिन है। HTML पार्सर आमतौर पर किसी भी मामले में पेज को रेंडर करने की कोशिश करेगा। आमतौर पर कोई त्रुटि नहीं होती है। लेकिन गति एक गलत व्यवहार वाले वेब पेज में समाप्त हो सकती है।

इस उदाहरण में:

<div id="aDiv">a</div>
<div id="aDiv">b</div>

CSS चयनकर्ता अभी भी काम करते हैं

#aDiv {
    color: red;
}

लेकिन जावास्क्रिप्ट दोनों तत्वों को संभालने में विफल है:

var html = document.getElementById("aDiv").innerHTML;

इस स्थिति में html वैरिएबल केवल पहला div कंटेंट ("a") ।

स्वीकार्य मूल्य

एक आईडी के लिए

id के मूल्य पर एकमात्र प्रतिबंध हैं:

यह दस्तावेज़ में अद्वितीय होना चाहिए
इसमें कोई भी अंतरिक्ष वर्ण नहीं होना चाहिए
इसमें कम से कम एक वर्ण होना चाहिए

तो मूल्य सभी अंक हो सकते हैं, बस एक अंक, बस विराम चिह्न वर्ण, विशेष वर्ण, जो भी हो। बस कोई व्हाट्सएप नहीं।

तो ये मान्य हैं:

<div id="container"> ... </div>
<div id="999"> ... </div>
<div id="#%LV-||"> ... </div>
<div id="____V"> ... </div>
<div id="⌘⌥"> ... </div>
<div id="♥"> ... </div>
<div id="{}"> ... </div>
<div id="©"> ... </div>
<div id="♤₩¤☆€~¥"> ... </div>

यह अमान्य है:

<div id=" "> ... </div>

यह भी अमान्य है, जब उसी दस्तावेज़ में शामिल किया गया है:

<div id="results"> ... </div>
<div id="results"> ... </div>

4.01

एक id मूल्य एक पत्र के साथ शुरू होना चाहिए, जिसे तब केवल इसके द्वारा अनुसरण किया जा सकता है:

अक्षर (AZ / az)
अंक (0-9)
हाइफ़न ("-")
अंडरस्कोर ("_")
कॉलन (":")
अवधियों ("।")

उपरोक्त HTML5 अनुभाग में उदाहरणों के पहले समूह का उल्लेख करते हुए, केवल एक ही मान्य है:

<div id="container"> ... </div>

ये भी मान्य हैं:

<div id="sampletext"> ... </div>
<div id="sample-text"> ... </div>
<div id="sample_text"> ... </div>
<div id="sample:text"> ... </div>
<div id="sample.text"> ... </div>

फिर, अगर यह एक पत्र (अपरकेस या लोअरकेस) से शुरू नहीं होता है, तो यह मान्य नहीं है।

एक कक्षा के लिए

कक्षाओं के लिए नियम अनिवार्य रूप से एक id लिए समान हैं। अंतर यह है कि दस्तावेज़ में class मूल्यों को अद्वितीय होने की आवश्यकता नहीं है।

उपरोक्त उदाहरणों का उल्लेख करते हुए, हालांकि यह एक ही दस्तावेज में मान्य नहीं है:

<div id="results"> ... </div>
<div id="results"> ... </div>

यह पूरी तरह से ठीक है:

<div class="results"> ... </div>
<div class="results"> ... </div>

महत्वपूर्ण नोट: HTML के बाहर आईडी और क्लास मानों का व्यवहार कैसे किया जाता है

ध्यान रखें कि ऊपर दिए गए नियम और उदाहरण HTML के संदर्भ में लागू होते हैं।

id या class के मान में संख्याओं, विराम चिह्न या विशेष वर्णों का उपयोग करने से सीएसएस, जावास्क्रिप्ट और नियमित अभिव्यक्तियों जैसे अन्य संदर्भों में परेशानी हो सकती है।

उदाहरण के लिए, हालांकि HTML5 में निम्नलिखित id मान्य है:

<div id="9lions"> ... </div>

... यह CSS में अमान्य है:

4.1.3 वर्ण और मामला
CSS में, पहचानकर्ता (चयनकर्ताओं में तत्व नाम, वर्ग और ID सहित) में केवल वर्ण [a-zA-Z0-9] और ISO 10646 वर्ण U + 00A0 और उच्चतर हो सकते हैं, साथ ही हाइफ़न (-) और अंडरस्कोर ( _); वे एक अंक, दो हाइफ़न या एक हाइफ़न के बाद एक अंक से शुरू नहीं कर सकते हैं । _{(महत्व दिया)}

ज्यादातर मामलों में आप उन संदर्भों में पात्रों से बच सकते हैं जहां उनके पास प्रतिबंध या विशेष अर्थ है।

W3C संदर्भ

Modified text is an extract of the original Stack Overflow Documentation

के तहत लाइसेंस प्राप्त है CC BY-SA 3.0

से संबद्ध नहीं है Stack Overflow

HTML
क्लासेस और आई.डी.

खोज…