Can I Select Elements That Have Multiple Classes?
Yes, users can select HTML elements that have the same classes and then assign CSS properties to them. This can be done by writing all the class names on the same line separated with a comma and then simply assigning the properties. Let follow the below steps:
Step 1: Create Div Elements in the HTML File
In the HTML file, create three sibling div elements and assign two div’s same class. Inside each div create a “<h1>” element:
Step 2: Add CSS Properties
Inside the “<style>” tag, apply CSS properties to “heading1” and “heading2” classes. For the sake of example, different “font colors” are set to the element of both classes:
After executing the above code, the webpage looks like this:
The output confirms that styles have been applied to both classes.
Step 3: Applying CSS Properties to Multiple Classes
Now, write all classes on a single line on which the same styles need to apply. In this step, two classes having the same styles are applied. Make sure there is no extra space, and each class name is separated via a “comma”:
The “font-size” property sets the font size to 30px, and “font-family” makes the font style set to “Times New Roman” for better visualization.
The output looks like this:
That’s how users can select elements that have multiple classes and assign them CSS properties at once.
Conclusion
To select multiple HTML elements at once and apply CSS properties to it. First, assign HTML elements classes and in the “<style>” tag. After that, write those classes on the single line that are divided with “comma (,)”. In this way, users can assign CSS properties at once. This article has successfully demonstrated how users can choose elements having multiple classes.
