HTML क्लासेस
In this page:
<tagname class="classname">content</tagname>
<style>
.classname {
property: value;
}
</style>class Attribute क्या है?
class attribute का इस्तेमाल कई HTML elements को एक साथ group करने के लिए किया जाता है। किसी class name को अलग-अलग elements पर लगाकर, आप उन सभी पर एक जैसी styles या scripts एक साथ लागू कर सकते हैं।
उदाहरण: What is the class Attribute?
<p class="highlight">First</p>
<p class="highlight">Second</p>CSS में Classes को Select करना
अपनी stylesheet के अंदर classes को target और style करने के लिए, आप एक dot (.) के बाद अपना exact class name लिखते हैं। इससे उस class वाले webpage के सभी elements select हो जाते हैं।
उदाहरण: Selecting Classes with CSS
<style>
.highlight {
color: orange;
}
</style>
<p class="highlight">Styled by class</p>एक साथ कई Classes का उपयोग करना
एक HTML element सिर्फ एक class तक सीमित नहीं है। आप एक ही element पर कई class names को spaces से अलग करके लगा सकते हैं। इससे आप layout और style classes को एक साथ dynamically combine कर सकते हैं।
उदाहरण: Using Multiple Classes Together
<div class="card large">Combined classes</div>JavaScript Selectors में Classes
Classes सिर्फ styling के लिए नहीं होतीं। Web scripts, getElementsByClassName या querySelectorAll जैसे methods का इस्तेमाल करके class names के आधार पर elements को target कर सकते हैं और एक साथ कई items पर काम कर सकते हैं।
उदाहरण: Classes in JavaScript Selectors
<script>
document.querySelectorAll('.highlight');
</script>
<p class="highlight">Targeted by script</p>Semantic Class Naming Styles
Random या गड़बड़ class names लिखने से आपका कोड पढ़ने और scale करने में मुश्किल हो जाता है। Descriptive, semantic naming patterns (जैसे शब्दों को अलग करने के लिए hyphens का इस्तेमाल करना) अपनाने से आपका layout structure बाकी developers के लिए भी साफ हो जाता है।
उदाहरण: Semantic Class Naming Styles
<div class="tool-container">Semantic, hyphenated class name</div>- अपने HTML class attribute values के अंदर dot prefix जोड़ना (जैसे, class=".card")।
- कई classes को standard spaces के बजाय commas से अलग करना।
- classes को blue-box जैसे vague visual terms से नाम देना जो site redesign करते समय outdated हो जाते हैं।
- class attribute group styling और scripting के लिए कई HTML elements को एक साथ group करता है।
- CSS के अंदर dot prefix और उसके बाद exact class name इस्तेमाल करके classes को select और style करें।
- class attribute के अंदर names को spaces से अलग करके किसी एक element पर कई classes लागू करें।
class attribute सभी modern और legacy web browsers में natively पूरी तरह supported है।
Chapter Quiz — Complete all 12 topics to unlock
0/12 topics done
Complete these topics first: