Apply multiple css classes to div
- how to use two class in css
- how to use two pseudo class in css
- how to apply multiple class in css
- how to use multiple class selectors in css
Css multiple classes same style
Apply css when two classes are present!
How to apply two CSS classes to a single element?
We can apply multiple CSS classes to a single element by using the class attribute and separating each class with a space.
There are two ways to apply two CSS classes to a single element −
Apply two Classes Using the Class Attribute
The class attribute that is used to set a single class can also be used to set multiple classes −
<div class="class1 class2">This element has two CSS classes applied to it</div>Example
Let us see the example −
<!DOCTYPE html><html><head> <title>Multiple Classes</title> <style> .one { color: red; } .two { font-size: 24px; } </style></head><body> <p class = "one two">Using Class Attribute</p></body></html>Given that there is a p tag with id ‘paragraph’ to which we want to apply the classes.
The classList is a property and the add() method is used to add a class. In this case, we have added two classes i.e. one and two −
<script> const paragraph = document.getElementById('paragraph'); paragraph.clas- how to select two class in css
- how to target two class in css