How to give a css code for combined classes in HTML

Question

I have got two classes coming under list "active" and "main-tab-list like and want to give a css for this combined classes.

@Vipin, Can you please explain a bit more about what isn't working? — uSeRnAmEhAhAhAhAhA, Oct 09 '13 at 06:12

score 2 · Accepted Answer · answered Oct 09 '13 at 06:13

Just cascade them

 .main-tab-list.active{color:red;}

This ensures that only .main-tab-list which are active will be selected. Other classes who also have .active class on it won't be affected. It simply says, apply this rule to all .main-tab-list classes which at the same time have .active class

score 1 · Answer 2 · edited May 23 '17 at 12:23

If you want special styles to be applied to elements that have both classes then use a rule such as:

.active.main-tab-list {/*note there's no space between .active and .main-tab-list*/}

If you want the styles to apply to elements that have either of the classes group them:

.active ,
.main-tab-list {/*newline is not required*/}

See also Select element based on multiple classes and http://www.w3.org/TR/CSS2/selector.html

score 0 · Answer 3 · answered Oct 09 '13 at 06:08

0

you can combine it with comma. for example,

.active,.main-tab-list{color:red;}

answered Oct 09 '13 at 06:08

codingrose

15,563
11
39
58

How to give a css code for combined classes in HTML

3 Answers3