How to apply two CSS classes to a single element
Include both class strings in a single class attribute value, with a space in between.
<a class="c1 c2" > aa </a>
As others have pointed out, you simply delimit them with a space.
However, knowing how the selectors work is also useful.
Consider this piece of HTML...
<div class="a"></div>
<div class="b"></div>
<div class="a b"></div>
Using .a { ... }
as a selector will select the first and third. However, if you want to select one which has both a
and b
, you can use the selector .a.b { ... }
. Note that this won't work in IE6, it will simply select .b
(the last one).
1) Use multiple classes inside the class attribute, separated by whitespace (ref):
<a class="c1 c2">aa</a>
2) To target elements that contain all of the specified classes, use this CSS selector (no space) (ref):
.c1.c2 {
}