How to apply two CSS classes to a single element

HtmlCss

Html Problem Overview

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?

Html Solutions

Solution 1 - Html

  1. Use multiple classes inside the class attribute, separated by whitespace (ref):

    aa

  2. To target elements that contain all of the specified classes, use this CSS selector (no space) (ref):

    .c1.c2 { }

Solution 2 - Html

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

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

Solution 3 - Html

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

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

Solution 5 - Html

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>

Solution 6 - Html

Separate 'em with a space.

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

Solution 7 - Html

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

Categories
Recommended Html Solutions
Recommended Css Solutions

Previous Solution:

JavaScript: using a condition in switch case

JavascriptConditional StatementsSelect Case

Next Solution:

Environment Variable with Maven

JavaMavenEnvironment Variables

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestiondojoXView Question on Stackoverflow
Solution 1 - HtmlSalman AView Answer on Stackoverflow
Solution 2 - HtmlSteve JorgensenView Answer on Stackoverflow
Solution 3 - HtmlalexView Answer on Stackoverflow
Solution 4 - Htmluser2757598View Answer on Stackoverflow
Solution 5 - Htmlvivek KhannaView Answer on Stackoverflow
Solution 6 - HtmlAravind SureshView Answer on Stackoverflow
Solution 7 - HtmlAbhay shahView Answer on Stackoverflow