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

CSS id चयनकर्ता एक अद्वितीय id वाले HTML तत्व को लक्षित करता है।

आईडी चयनकर्ता सिंटैक्स:

#id-name {
    property-name: value;
}

एक विशेषता मान के समान आईडी नाम वाला एक HTML तत्व यहां दिया गया है:

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

CSS आईडी चयनकर्ता #id-name <div> . से जुड़ा हुआ है id-name . के साथ तत्व गुण। इसका मतलब है कि आप .id-name . में जो भी स्टाइलिंग गुण जोड़ते हैं अपने CSS स्टाइलशीट में <div> . पर लागू हो जाएं ।

हैश प्रतीक (# ) आईडी के नाम से पहले एक विशिष्ट सीएसएस सिंटैक्स है। जब आप किसी HTML तत्व में id नाम को id विशेषता के रूप में जोड़ते हैं तो आप # का उपयोग नहीं करते हैं प्रतीक।

अब हमने जो सीखा है उसका प्रयोग एक व्यावहारिक उदाहरण में करते हैं।

यह रहा एक HTML <button> कुछ डिफ़ॉल्ट स्टाइल के साथ तत्व जो ब्राउज़र के उपयोगकर्ता एजेंट स्टाइलशीट से विरासत में मिला है:

<button>Button</button>

डिफ़ॉल्ट रूप:

उबाऊ हुह?

आइए #my-button . नामक CSS आईडी बनाकर डिफ़ॉल्ट बटन स्टाइल को ओवरराइड करें और इसे कुछ स्टाइलिंग गुण दें:

#my-button {
    font-size: 18px;
    padding: 14px 24px;
    border-radius: 8px;
    border: none;
    background-color: #F7575C;
    color: white;
}

और फिर आईडी को आईडी विशेषता के रूप में बटन तत्व में जोड़ें:

<button id="my-button">Button</button>

परिणाम:

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

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