CSS Class Selector
The CSS .class selector is used to select all elements that belong to a specific class attribute. By using the period (.) character followed by the class name, you can apply CSS properties to all elements with that class.
Syntax:
.class {
// CSS property
}
Example 1: This example demonstrates the class Selector for the specific HTML element.
<!DOCTYPE html>
<html>
<head>
<style>
.Beginner {
color: green;
}
.gfg {
background-color: yellow;
font-style: italic;
color: green;
}
</style>
</head>
<body style="text-align:center">
<h1 class="Beginner">
w3wiki
</h1>
<h2>.class Selector</h2>
<div class="gfg">
<p>w3wiki: A computer science portal</p>
</div>
</body>
</html>
Output:
Example 2: This example describes the space-separated class name.
<!DOCTYPE html>
<html>
<head>
<title>class selector</title>
<style>
.Beginner {
color: green;
}
.gfg {
background-color: yellow;
</style>
</head>
<body style="text-align:center">
<h1 class="Beginner">
w3wiki
</h1>
<h2 class="gfg">.class Selector</h2>
<p class="Beginner gfg">
w3wiki: A computer science portal
</p>
</body>
</html>
Output:
The CSS class selector is a powerful tool for applying styles to specific groups of elements, enhancing the flexibility and control you have over your web design.
Supported Browsers: The browser supported by the .class selector are listed below:
- Google Chrome 1.0
- Firefox 1.0
- Microsoft Edge 12.0
- Opera 3.5
- Internet Explorer 3.0
- Safari 1.0