CSS ID सिलेक्टर विस्तृत

ID चयनकर्ता डॉक्यूमेंट तत्वों से स्वतंत्र रूप से शैली निर्धारित करने की अनुमति देता है。

CSS ID चयनकर्ता

कुछ पहलुओं में, ID चयनकर्ता क्लास चयनकर्ता के समान है, लेकिन कुछ महत्वपूर्ण भेद हैं।

व्याकरण

पहले, ID चयनकर्ता के पहले # संकेत आता है - जिसे बोर्ड संकेत या विन्यास संकेत के रूप में भी जाना जाता है।

नीचे के नियम को देखें:

*#intro {font-weight:bold;}

क्लास चयनकर्ता के समान, ID चयनकर्ता में विकल्पित चयनकर्ता को नज़रअंदाज़ किया जा सकता है। पहले के उदाहरण को इस तरह भी लिखा जा सकता है:

#intro {font-weight:bold;}

इस चयनकर्ता का प्रभाव एकजूट होगा。

दूसरा भेद यह है कि ID चयनकर्ता class गुण के मान को नहीं हवाला देता, बिना किसी संदेह के यह id गुण के मान को हवाला देता है。

नीचे एक वास्तविक ID चयनकर्ता का उदाहरण दिया गया है:

<p id="intro">This is a paragraph of introduction.</p>

आपको खुद साफ़ करें

क्लास चयनकर्ता या आईडी चयनकर्ता?

क्लास चयनकर्ता के बारे में हमने पहले इस चापरे में बताया है, किसी भी तत्व को कई बार क्लास दे सकते हैं। पिछले चापरे में 'important' नामक क्लास नाम को p और h1 तत्वों पर लगाया गया था, और यह अधिक तत्वों पर भी लगाया जा सकता है。

भेद 1: केवल डॉक्यूमेंट में एक बार इस्तेमाल किया जा सकता है

क्लास के विपरीत, एक HTML डॉक्यूमेंट में, ID चयनकर्ता एक बार ही इस्तेमाल किया जाता है और केवल एक बार ही।

भेद 2: ID शब्द सूची का इस्तेमाल नहीं किया जा सकता

क्लास चयनकर्ता के विपरीत, आईडी चयनकर्ता को मिलाकर नहीं इस्तेमाल किया जा सकता है, क्योंकि ID गुण को खाली जगहों से अलग शब्दों की सूची नहीं दी जा सकती है。

भेद 3: आईडी में अधिक अर्थ हो सकते हैं

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

#mostImportant {color:red; background:yellow;}

यह नियम निम्नलिखित सभी तत्वों के साथ मेल खाता है (इसके कारण वे सभी एक ही डॉक्यूमेंट में समय-समय पर नहीं होते, क्योंकि उनमें सभी का एक ही ID मान है):

<h1 id="mostImportant"यह महत्वपूर्ण है!
<em id="mostImportant"यह महत्वपूर्ण है!
<ul id="mostImportant">This is important!</ul>

अपने आप प्रयास करें:

दूरीबादी शृंखलावादी

ध्यान दें कि क्लास सिलेक्टर और ID सिलेक्टर दूरीबादी शृंखलावादी हो सकते हैं।यह दस्तावेज़ की भाषा पर निर्भर करता है।HTML और XHTML को क्लास और ID मान्यता दूरीबादी शृंखलावादी बताते हैं, इसलिए क्लास और ID मान्यता का आकार दस्तावेज़ में के समान होना चाहिए।

इसलिए, नीचे दिए गए CSS और HTML के लिए एलिमेंट बोल्ड नहीं होगा:

#intro {font-weight:bold;}
<p id="Intro">This is a paragraph of introduction.</p>

अक्षर i के आकार के अनुसार उपरोक्त एलिमेंट को मेल नहीं खाता।