The basic rule to select an element with multiple classes is that we have to join each class with a period(.) character without giving any space between them.
For example, if you want to select an element that has two classes class1 and class2, then you have to use .class1.class2 to select this element.
The .class1.class2 will select every element that has both classes class1 and class2.
See this working example:
Example:
.class1.class2{
background: yellow;
}
Similarly, to select an element that has three classes, you have to join all three classes with a period(.) character. For example .class1.class2.class3
ID and Class Combination
Just like multiple classes, you can target an element that has a given id and a class both.
Put a # character before the id and a period(.) character before the class without giving any space between them to select an element that has a given id and a class.
For example, #name.yellow
The following example selects every element that has an id name and a class yellow:
Example:
#name.yellow{
background: yellow;
}
There can be such infinite combinations of IDs and classes, you can try them out yourself.
