कक्षा - सीएसएस-ट्रिक्स

Anonim

CSS में एक वर्ग चयनकर्ता इस तरह एक डॉट (।) से शुरू होता है:

.class ( )

एक वर्ग चयनकर्ता सभी तत्वों का चयन एक मिलान वर्ग विशेषता के साथ करता है।

उदाहरण के लिए, यह तत्व:

Push Me

इस तरह से चुना और स्टाइल किया जाता है:

.big-button ( font-size: 60px; )

आप एक वर्ग को कोई भी नाम दे सकते हैं जो एक पत्र, हाइफ़न (-), या अंडरस्कोर (_) से शुरू होता है। आप कक्षा के नामों में संख्याओं का उपयोग कर सकते हैं, लेकिन एक संख्या एक वर्ण या हाइफ़न के बाद दूसरा वर्ण नहीं हो सकती है। जब तक आप पागल न हों और चयनकर्ताओं से बचना शुरू कर दें, जो अजीब हो सकता है:

.\3A \`\( ( /* matches elements with class=":`(" */ )

एक तत्व में एक से अधिक वर्ग हो सकते हैं:



 This paragraph will get styles from .intro and .blue selectors.

कई वर्गों के साथ एक तत्व प्रत्येक वर्ग के लिए सीएसएस नियमों के साथ स्टाइल किया गया है। तत्वों का चयन करने के लिए आप कई वर्गों को जोड़ सकते हैं:

/* only selects elements with BOTH of these classes */ .intro.blue ( font-size: 1.3em; )

यह डेमो दिखाता है कि एकल-चयनकर्ता संयुक्त चयनकर्ताओं से कैसे अलग हैं:

आप एक वर्ग चयनकर्ता को एक विशेष प्रकार के तत्व तक सीमित कर सकते हैं, जिसे कभी-कभी "टैग योग्यता" कहा जाता है:

ul.menu ( list-style: none; )

विशेषता

अपने आप में, एक वर्ग चयनकर्ता का एक विशिष्ट मान होता है 0, 0, 1, 0. यह तत्व चयनकर्ता की तुलना में "अधिक शक्तिशाली" होता है (जैसे:) a ( )लेकिन आईडी चयनकर्ता (जैसे #header ( )) की तुलना में कम शक्तिशाली होता है । जब आप वर्ग चयनकर्ताओं को जोड़ते हैं या किसी विशिष्ट तत्व के लिए चयनकर्ता को सीमित करते हैं तो विशिष्टता बढ़ जाती है।

जावास्क्रिप्ट के साथ कक्षाएं एक्सेस करना

आप classListजावास्क्रिप्ट में किसी तत्व की कक्षाओं को पढ़ और उनमें फेरबदल कर सकते हैं । उदाहरण के लिए, वर्ग जोड़ना निम्न हो सकता है:

document.getElementById('italicize').classList.add('italic');

यह डेमो classListउपयोग के बुनियादी उदाहरण दिखाता है :

jQuery भी कक्षाओं के साथ बातचीत, सहित के लिए तरीके है .addClass(), .removeClass(), .toggleClass(), और .hasClass()।

अधिक जानकारी

  • वर्ग चयनकर्ताओं के लिए W3C विनिर्देश पढ़ें।
  • सिमेंटिक क्लास के नामों के बारे में अधिक जानें।
  • विशिष्टता के बारे में अधिक जानें।
  • कक्षाओं और आईडी के बीच अंतर के बारे में जानें।
  • कई वर्ग चयनकर्ताओं और वर्ग / आईडी चयनकर्ता combos के बारे में जानें।
  • .ClassList API के बारे में जानें।
  • JQuery में वर्ग हेरफेर के बारे में जानें।

ब्राउज़र का समर्थन

क्रोम सफारी फ़ायर्फ़ॉक्स ओपेरा अर्थात एंड्रॉयड आईओएस
कोई कोई कोई कोई कोई कोई कोई