In this article, we will learn about how can we apply styles to multiple classes at once. You can apply the same style to different classes at once in 2 different ways and we are going to see these two things with examples.
Approach 1: In this approach, we are going to have multiple CSS declarations for the same properties by separating them with commas.
Syntax:
.class_A , .class_B{
/*property*/
}Example 1:
HTML
<!DOCTYPE html><html>
<head>
<style>
body {
background-color: black;
color: white;
}
.abc,
.xyz {
color: green;
font-size: 50px;
}
</style>
</head>
<body>
<center>
<h1 class="color-fg-success"> GeeksforGeeks </h1>
<h3>How can I apply styles to multiple classes at once ?</h3>
<div class="abc">GeeksforGeeks</div>
<div class="xyz">GeeksforGeeks</div>
</center>
</body>
</html>
|
Output:
Approach 2: In this approach, we are going to have the element name with the class name joined by the dot(.) class selector.
Syntax:
element_name.class_Name, element_name.class_Name, element_name.class_Name, {
/*property*/
}Note: This approach is mostly used to apply different CSS styles when the same class name is available in the different elements.
Example 2:
HTML
<!DOCTYPE html><html>
<head>
<style>
body {
background-color: black;
color: white;
}
div.abc,
div.xyz {
color: green;
font-size: 50px;
}
</style>
</head>
<body>
<center>
<h1 class="color-fg-success"> GeeksforGeeks </h1>
<h3>How can I apply styles to multiple classes at once ?</h3>
<div class="abc">GeeksforGeeks</div>
<div class="xyz">GeeksforGeeks</div>
</center>
</body>
</html>
|
Output: