To select an element with two classes, you have to chain both the classes using a period(.) without giving any space between them.
For example, if the element has two classes, class1 and class2, then you have to use .class1.class2 to select this element. Similarly, .class1.class2.class3 if the element has three classes.
Let’s say we have a div element which has two classes, class1 and class2 and another div with only class1:
<div class="class1 class2">This div has two classes.</div> <div class="class1">This div has only one class.</div>
If we only want to select the div which has both classes, class1 and class2, then we have to chain them together using a period(.) in our CSS file:
/*Select element with two classes*/
.class1.class2{
background-color: yellow;
}
This will be the output after applying the above styles:
Similarly, if the element has three classes, then you have to chain all three classes using a period(.) to select the element:
/*Select element with three classes*/
.class1.class2.class3{
background-color: yellow;
}
Thanks for reading.
