How to apply styles to multiple classes at once ?
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:
Last Updated :
14 Dec, 2022
Like Article
Save Article
Share your thoughts in the comments
Please Login to comment...