CSS selector for an element having class .a and class .b
div[class~="a"][class~="b"] {
color: #f00;
}
Class selectors can be combined:
div.a.b {
color: red;
}
Quoting from the spec:
To match a subset of "class" values, each value must be preceded by a ".".
For example, the following rule matches any P element whose "class" attribute has been assigned a list of space-separated values that includes "pastoral" and "marine":
p.marine.pastoral { color: green }
This rule matches when
class="pastoral blue aqua marine"
but does not match forclass="pastoral blue"
.
That's entirely possible. If you specify two classes on an element (without any spaces), that means that it must have both for the rule to apply.
div.a {
color: blue;
}
div.b {
color: green;
}
div.a.b {
color: red;
}
<div class="a">
A
</div>
<div class="b">
B
</div>
<div class="a b">
AB
</div>