HTML class एट्रिब्यूट: CSS क्लास नाम सेट करना

HTML class एट्रिब्यूट

class एट्रिब्यूट HTML एलिमेंट्स के लिए एक या अधिक क्लास नाम निर्दिष्ट करता है। CSS और JavaScript इन क्लास नामों का उपयोग एलिमेंट्स को चुनने और स्टाइल/मैनिपुलेट करने के लिए करते हैं। एक एलिमेंट में स्पेस से अलग कई क्लास हो सकते हैं।

उदाहरण: CSS के साथ क्लास उपयोग

<!DOCTYPE html>
<html>
<head>
  <style>
    h2.demo {
      color: orange;
      background-color: black;
      padding: 10px;
    }
  </style>
</head>
<body>
  <h1>संसाधन</h1>
  <h2 class="demo">टेक्स्ट ट्यूटोरियल्स</h2>
  <h2 class="demo">वीडियो ट्यूटोरियल्स</h2>
  <h2 class="demo">साक्षात्कार प्रश्न और उत्तर</h2>
  <h2 class="demo">ऑनलाइन क्विज़</h2>
</body>
</html>

आउटपुट

सभी चार <h2> एलिमेंट्स नारंगी टेक्स्ट और काले बैकग्राउंड के साथ स्टाइल्ड होंगे।

कोड व्याख्या

<h2 class="demo">टेक्स्ट ट्यूटोरियल्स</h2>
<h2 class="demo">वीडियो ट्यूटोरियल्स</h2>

CSS नियम:

h2.demo {
  color: orange;
  background-color: black;
}

कई क्लासेस

<div class="container primary large">...</div>

तीन क्लासेस: container, primary, large

सर्वोत्तम अभ्यास

• वर्णनात्मक, सेमेंटिक क्लास नाम उपयोग करें (.btn-primary नहीं .blue-button)
• BEM नामकरण परंपरा अपनाएं: block__element--modifier
• केवल स्टाइलिंग के लिए नहीं, JavaScript हुक्स के लिए भी क्लासेस उपयोग करें
• ID के बजाय क्लास प्राथमिकता दें (पुन: उपयोग योग्य)

JavaScript में उपयोग

// सभी .demo एलिमेंट्स चुनें
document.querySelectorAll('.demo');

// क्लास जोड़ें/हटाएं/टॉगल करें
element.classList.add('active');
element.classList.remove('hidden');
element.classList.toggle('open');