सीएसएस वर्ग चयनकर्ता

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

वर्ग चयनकर्ता सिंटैक्स:

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

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

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

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

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

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

यह रहा एक 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 class="my-button">Button</button>

परिणाम:

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

जानना अच्छा है:

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