CSS क्लास सेलेक्टर

CSS क्लास सेलेक्टर उन सभी HTML एलिमेंट्स को टार्गेट करता है जिनसे मैचिंग क्लास नाम एट्रिब्यूट जुड़ा होता है।

क्लास सेलेक्टर सिंटैक्स:

.class-name { property-name: value; }

यहाँ एक HTML एलिमेंट है जिसमें उसी क्लास नाम को एट्रिब्यूट वैल्यू के रूप में दिया गया है:

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

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

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

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

यहाँ एक HTML <button> एलिमेंट है जिसमें ब्राउज़र के यूजर एजेंट स्टाइलशीट से इनहेरिट की गई कुछ डिफ़ॉल्ट स्टाइलिंग है:

<button>बटन</button>

डिफ़ॉल्ट लुक:

उबाऊ है ना?

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

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

और बटन एलिमेंट में क्लास एट्रिब्यूट के रूप में जोड़ें:

<button class="my-button">बटन</button>

परिणाम:

आपने अभी CSS क्लास सेलेक्टर का उपयोग करने के बारे में जानने योग्य सबसे महत्वपूर्ण चीजें सीखी हैं।

जानने योग्य बातें:

• CSS क्लासेस को किसी भी HTML एलिमेंट पर पुन: उपयोग किया जा सकता है, ID सेलेक्टर्स के विपरीत, जिन्हें केवल एक बार उपयोग किया जा सकता है।
• आप एक ही एलिमेंट पर कई अलग-अलग CSS क्लासेस जोड़ सकते हैं <div class="first-class second-class third-class"। यह आपको छोटे यूटिलिटी क्लासेस के साथ अपने एलिमेंट डिज़ाइन्स को असेंबल करने का एक लचीला तरीका देता है, जैसे टेलविंड CSS फ्रेमवर्क के साथ देखा जाता है।