How to apply two CSS classes to a single element

Solution 1:

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 {
}

Solution 2:

Include both class strings in a single class attribute value, with a space in between.

<a class="c1 c2" > aa </a>

Solution 3:

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).

Solution 4:

<a class="c1 c2">aa</a>

Solution 5:

This is very clear that to add two classes in single div, first you have to generate the classes and then combine them. This process is used to make changes and reduce the no. of classes. Those who make the website from scratch mostly used this type of methods. they make two classes first class is for color and second class is for setting width, height, font-style, etc. When we combine both the classes then the first class and second class both are in effect.

.color
{background-color:#21B286;}
.box
{
  width:"100%";
  height:"100px";
  font-size: 16px;
  text-align:center;
  line-height:1.19em;
}
.box.color
{
width:"100%";
height:"100px";
font-size:16px;
color:#000000;
text-align:center;
}

<div class="box color">orderlist</div>