How to apply two CSS classes to a single element

Question

Can I apply 2 classes to a single div or span or any HTML element? For example:

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

I tried and in my case c2 does not get applied. How can I apply both classes at once?

Salman A · Accepted Answer · 2014-11-23T09:00:49.037

197

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

edited Nov 23 '14 at 09:00

answered Mar 30 '11 at 06:27

Salman A

262,204
82
430
521

score 16 · Answer 2 · answered Mar 30 '11 at 06:27

16

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

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

answered Mar 30 '11 at 06:27

Steve Jorgensen

11,725
1
33
43

score 12 · Answer 3 · answered Mar 30 '11 at 06:43

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

score 5 · Answer 4 · answered Sep 07 '13 at 18:47

5

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

answered Sep 07 '13 at 18:47

user2757598

59
2
3

score 5 · Answer 5 · answered May 05 '16 at 20:03

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>

score 4 · Answer 6 · answered Aug 14 '16 at 12:04

4

Separate 'em with a space.

<div class="c1 c2"></div>

answered Aug 14 '16 at 12:04

Aravind Suresh Thakidayil

1,173
2
17
30

Abhay shah · Answer 7 · 2021-07-07T06:45:46.567

3

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

edited Jul 07 '21 at 06:45

answered Aug 10 '17 at 10:50

Abhay shah

76
5

Though this might answer the question, please also add a short explanation what your code does and why it solves the initial problem. – user1438038 Aug 10 '17 at 11:12

score 0 · Answer 8 · answered Oct 02 '22 at 06:38

In practice, two classes are used for an element when the two classes format different non-overlapping areas, e.g., one class specifies the color and the other the alignment of text. Then you use these two classes for an element and don't need to write a third class that is the amalgam of the other two, see my source code.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <title>Example</title>
  <style>
    .color-red         {color: red;        }
    .center-align-text {text-align: center;}
  </style>
</head>
<body style="width:500px; background-color:lightgray">
  <p style="width:400px;background-color:white" 
     class="color-red center-align-text">Centered pepperoni</p>
</body>
</html>

How to apply two CSS classes to a single element

8 Answers8

Linked

Related