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?

User · Answer

lt a class  c1 c2  gt aa lt  a gt

User · Answer

Include both class strings in a single class attribute value  with a space in between    lt a class  c1 c2   gt  aa  lt  a gt

User · Answer

Separate  em with a space    lt div class  c1 c2  gt  lt  div gt

User · Answer

1  Use multiple classes inside the class attribute  separated by whitespace  ref     lt a class  c1 c2  gt aa lt  a gt    2  To target elements that contain all of the specified classes  use this CSS selector  no space   ref     c1 c2

User · Answer

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.

_x000D_

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

_x000D_

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

_x000D_

User · Answer

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      lt div class  a  gt  lt  div gt   lt div class  b  gt  lt  div gt   lt div class  a b  gt  lt  div gt    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

User · Answer

x000D   x000D   color x000D   background-color  21B286   x000D   box x000D    x000D    width  100    x000D    height  100px   x000D    font-size  16px  x000D    text-align center  x000D    line-height 1 19em  x000D    x000D   box color x000D    x000D  width  100    x000D  height  100px   x000D  font-size 16px  x000D  color  000000  x000D  text-align center  x000D    x000D   lt div class  box color  gt orderlist lt  div gt  x000D   x000D   x000D     x000D   x000D   color x000D   background-color  21B286   x000D   box x000D    x000D    width  100    x000D    height  100px   x000D    font-size  16px  x000D    text-align center  x000D    line-height 1 19em  x000D    x000D   box color x000D    x000D  width  100    x000D  height  100px   x000D  font-size 16px  x000D  color  000000  x000D  text-align center  x000D    x000D   lt div class  box color  gt orderlist lt  div gt  x000D   x000D   x000D     x000D   x000D   color x000D   background-color  21B286   x000D   box x000D    x000D    width  100    x000D    height  100px   x000D    font-size  16px  x000D    text-align center  x000D    line-height 1 19em  x000D    x000D   box color x000D    x000D  width  100    x000D  height  100px   x000D  font-size 16px  x000D  color  000000  x000D  text-align center  x000D    x000D   lt div class  box color  gt orderlist lt  div gt  x000D   x000D   x000D

[html] How to apply two CSS classes to a single element

The answer is

Examples related to html

Examples related to css

Tags