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    lt a class  c1  class  c2  gt aa lt  a gt    I tried and in my case c2 does not get applied  How can i apply both classes at once

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

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

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

User · Answer

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

User · Answer

lt a class  c1 c2  gt aa lt  a gt

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

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

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

Examples related to html

Examples related to css