CSS id सिलेक्टर

id चयनक

id चयनक एक विशिष्ट id से चिह्नित एचटीएमएल एलेमेंट को विशिष्ट शैली निर्दिष्ट कर सकता है.

id चयनक "#" से परिभाषित किया जाता है.

नीचे दिए दो id चयनक, पहला एलेमेंट को लाल रंग देता है, दूसरा एलेमेंट को हरी रंग देता है:

#red {color:red;}
#green {color:green;}

नीचे दिए एचटीएमएल कोड में, id अटिबट red के p एलेमेंट लाल रंग में प्रदर्शित होता है, जबकि id अटिबट green के p एलेमेंट हरी रंग में प्रदर्शित होता है.

<p id="red"> यह पैराग्राफ लाल है。</p>
<p id="green"> यह पैराग्राफ हरी है。</p>

ध्यान दें:id अटिबट केवल हर एक एचटीएमएल दस्तावेज़ में एक बार ही प्रदर्शित होता है. क्योंकि इसका कारण जानना चाहते हैं, तो पढ़ें XHTML: वेबसाइट पुनर्संचयन।

id चयनक और उपचयन चयनक

आधुनिक लेआउट में, id चयनक अक्सर उपचयन चयनक के निर्माण के लिए इस्तेमाल किया जाता है.

#sidebar p {
	font-style: italic;
	टेक्स्ट-अलाइन: राइट;
	margin-top: 0.5em;
	}

ऊपरी शैली केवल id sidebar के एलेमेंट के भीतर आने वाले पैराग्राफ को लागू होगी. यह एलेमेंट संभवतः div या टेबल कक्ष हो सकता है, यद्यपि यह एक अन्य टेबल या ब्लॉक एलेमेंट भी हो सकता है. यह एक इनलाइन एलेमेंट, जैसे <em></em> या <span></span> के रूप में भी हो सकता है, लेकिन इस उपयोग का अवैधता है, क्योंकि <span> इनलाइन एलेमेंट में <p> इम्बेड किया नहीं जा सकता (अगर कारण को याद नहीं है, ये पढ़ें XHTML: वेबसाइट पुनर्संचयन）。

एक चयनक, अनेक उपयोग

यदि sidebar के रूप में चिह्नित एलेमेंट केवल एक बार दस्तावेज़ में प्रदर्शित होता है, तो यह id चयनक एक उपचयन चयनक के रूप में कई बार इस्तेमाल किया जा सकता है:

#sidebar p {
	font-style: italic;
	टेक्स्ट-अलाइन: राइट;
	margin-top: 0.5em;
	}
#sidebar h2 {
	font-size: 1em;
	font-weight: normal;
	font-style: italic;
	margin: 0;
	line-height: 1.5;
	टेक्स्ट-अलाइन: राइट;
	}

यहाँ, पृष्ठ में अन्य p एलिमेंट से स्पष्ट रूप से अलग, sidebar के अंदर p एलिमेंट को विशेष प्रबंधन किया गया है, साथ ही, पृष्ठ में अन्य सभी h2 एलिमेंट से स्पष्ट रूप से अलग, sidebar में h2 एलिमेंट को भी अलग विशेष प्रबंधन किया गया है。

अकेला सिलेक्टर

id सिलेक्टर चाहे वह पैरेंट सिलेक्टर का निर्माण न करे, वह भी स्वत: कार्य कर सकता है:

#sidebar {
	बॉर्डर: 1पिक्सल डॉटेड #000;
	पैडिंग: 10पिक्सल;
	}

इस नियम के अनुसार, id के लिए sidebar का एलिमेंट एक पिक्सल चौड़ा काला डॉटेड बॉर्डर होगा, साथ ही उसके आसपास 10 पिक्सल विद्युत गाप (पैडिंग, आंतरिक खाली स्थान) होगा।पुराने संस्करण के Windows/IE ब्राउज़र पढ़ाई करने से इस नियम को अनदेखा कर सकते हैं, जब तक आप इस सिलेक्टर के साथ जुड़े एलिमेंट को विशेष रूप से परिभाषित नहीं करते।

div#sidebar {
	बॉर्डर: 1पिक्सल डॉटेड #000;
	पैडिंग: 10पिक्सल;
	}

संबंधित सामग्री

यदि आप ID सिलेक्टर के बारे में अधिक जानना चाहते हैं, तो कोडवैसी.कॉम के एडवांस्ड ट्यूटोरियल को पढ़ें:CSS ID सिलेक्टर विस्तृत।