CSS ID सेलेक्टर एक यूनिक ID वाले HTML एलिमेंट को टार्गेट करता है।
ID सेलेक्टर सिंटैक्स:
#id-name { property-name: value; }यहाँ एक HTML एलिमेंट है जिसमें उसी ID नाम को एट्रिब्यूट वैल्यू के रूप में दिया गया है:
<div id="id-name"></div>CSS ID सेलेक्टर #id-name id-name एट्रिब्यूट वाले <div> एलिमेंट से जुड़ा हुआ है। इसका मतलब है कि आप #id-name में अपनी CSS स्टाइलशीट में जो भी स्टाइलिंग प्रॉपर्टीज जोड़ते हैं, वे <div> पर लागू हो जाती हैं।
नाम से पहले हैश सिंबल (#) एक विशिष्ट CSS सिंटैक्स है। जब आप किसी HTML एलिमेंट में ID नाम को ID एट्रिब्यूट के रूप में जोड़ते हैं तो आप # सिंबल का उपयोग नहीं करते।
अब आइए हमने अभी जो सीखा है उसका एक व्यावहारिक उदाहरण में उपयोग करें।
यहाँ एक HTML <button> एलिमेंट है जिसमें ब्राउज़र के यूजर एजेंट स्टाइलशीट से इनहेरिट की गई कुछ डिफ़ॉल्ट स्टाइलिंग है:
<button>बटन</button>डिफ़ॉल्ट लुक:
उबाऊ है ना?
आइए एक CSS ID #my-button बनाकर डिफ़ॉल्ट बटन स्टाइलिंग को ओवरराइड करें और इसे कुछ स्टाइलिंग प्रॉपर्टीज दें:
#my-button { font-size: 18px; padding: 14px 24px; border-radius: 8px; border: none; background-color: #F7575C; color: white; }और फिर बटन एलिमेंट में ID को ID एट्रिब्यूट के रूप में जोड़ें:
<button id="my-button">बटन</button>परिणाम:
ID सेलेक्टर के बारे में जानने वाली सबसे महत्वपूर्ण बात यह है कि CSS क्लास सेलेक्टर्स के विपरीत, IDs को केवल एक पेज पर एक एलिमेंट पर लागू किया जा सकता है। यह IDs को क्लासेस की तुलना में कम लचीला बनाता है, लेकिन अधिक अनुमानित भी।
अंगूठे का नियम है कि IDs का उपयोग केवल उन सिंगल एलिमेंट्स के लिए करें जो एक पेज पर एक बार दिखाई देते हैं, जैसे हेडर, फूटर, या नेविगेशन बार।
