Example
Select and style all elements with class="intro":
<html>
<head>
<style>
.intro {
background-color: yellow;
}
</style>
</head>
<body>
<h1>Welcome to My Homepage</h1>
<div class="intro">
<p>My name is kabir</p>
<p>I live in mumbai.</p>
</div>
<p>My best friend is robert.</p>
</body>
</html>
More "Try it Yourself" examples below.
Definition and Usage
The .class selector selects elements with a specific class attribute.
To select elements with a specific class, write a period (.) character, followed by the name of the class.
You can also specify that only specific HTML elements should be affected by a class. To do this, start with the element name, then write the period (.) character, followed by the name of the class (look at Example 1 below).
HTML elements can also refer to more than one class (look at Example 2 below).
| Version: | CSS1 |
|---|
Browser Support
| Selector | Crome | firefox | opera | safari | internet explorer |
|---|---|---|---|---|---|
| .class | Yes | Yes | Yes | Yes | Yes |
नीचे "खुद को आज़माएं" उदाहरण नीचे दिए गए हैं
परिभाषा और उपयोग
वर्ग चयनकर्ता एक विशिष्ट वर्ग विशेषता वाले तत्वों का चयन करता है।
एक विशिष्ट वर्ग के तत्वों को चुनने के लिए, अवधि (।) चरित्र लिखें, उसके बाद कक्षा का नाम।
आप यह भी निर्दिष्ट कर सकते हैं कि कक्षा द्वारा केवल विशिष्ट HTML तत्वों को प्रभावित किया जाना चाहिए। ऐसा करने के लिए, तत्व के नाम से शुरू करें, फिर अवधि (।) चरित्र लिखें, उसके बाद वर्ग का नाम (नीचे उदाहरण 1 को देखें)।
एचटीएमएल तत्व एक से अधिक वर्गों का भी उल्लेख कर सकते हैं (उदाहरण 2 नीचे देखें)।
Browser Support
| Selector | Crome | firefox | opera | safari | internet explorer |
|---|---|---|---|---|---|
| .class | Yes | Yes | Yes | Yes | Yes |
More Examples
Example 1
Style all <p> elements with class="hometown":
<!DOCTYPE html>
<html>
<head>
<style>
p.hometown {
background: yellow;
}
</style>
</head>
<body>
<p>My name is Donald.</p>
<p class="hometown">I live in Ducksburg.</p>
<p>My name is Dolly.</p>
<p class="hometown">I also live in Ducksburg.</p>
</body>
</html>
