CSS multiple classes property override

Question

If I have a style class defined as such:

.myclass{
    //bunch of other stuff
    float:left;
}

and I define another class like this:

.myclass-right{
    float:right;
}

and I define a div this way:

<div class="myclass myclass-right"></div>

Will that div inherit everything from myclass, but override the float property to float:right? That's what I'd expect to happen. Also kind of want to know if that has any cross-browser implications (good browsers vs. IE 7 or greater, f*** IE6).

Yes that's the way it'll work, and [here](http://jsfiddle.net/Pointy/Fr8Te/) is a jsfiddle to demonstrate. — Pointy, Nov 14 '11 at 20:05
Duplicate of http://stackoverflow.com/questions/3066356/multiple-css-classes-properties-overlapping-based-on-the-order-defined — deviousdodo, Nov 14 '11 at 20:07
Oops. It is a dupe. Guess I didn't look hard enough. Give me 5 minutes before you close it down so I can give one lucky contestant another 15 rep for their helpful answer. — iandisme, Nov 14 '11 at 20:12

steveax · Accepted Answer · 2017-06-23T04:41:37.443

42

As long as the selectors have the same specificity (in this case they do) and .myclass-right style block is defined after .myclass, yes.

Edit to expand: the order the classes appear in the html element has no effect, the only thing that matters is the specificity of the selector and the order in which the selectors appear in the style sheet.

edited Jun 23 '17 at 04:41

answered Nov 14 '11 at 20:05

steveax

17,527
6
44
59

3

Good clarification with your 'Edit to expand'. The order in the stylesheet mattering is a bit insidious... – Droj Aug 04 '16 at 15:53
I did not realize the order in the stylesheet mattered like this! – Erick Robertson Mar 02 '20 at 01:45

score 17 · Answer 2 · answered Nov 14 '11 at 20:08

17

Just wanted to throw out another option in addition to !important as well as style definition order: you can chain the two together as well:

.myclass.myclass-right{float:right;}
.myclass{float:left;}

answered Nov 14 '11 at 20:08

streetlogics

4,640
33
33

score 16 · Answer 3 · answered Nov 14 '11 at 20:04

16

Using !important is one way to do it.

.myclass-right{
    float:right !important;
}

In addition if you are more specific with your selector it should override as well

div.myclass-right{
    float:right;
}

answered Nov 14 '11 at 20:04

John Hartsock

85,422
23
131
146

score 7 · Answer 4 · answered Nov 14 '11 at 20:05

7

As long as myclass-right is declared after your other class in your css file, it will work.

answered Nov 14 '11 at 20:05

Leo

5,069
2
20
27

S Panfilov · Answer 5 · 2020-03-24T12:18:30.287

4

In case of a conflict, the css tag that comes after has a priority.

In other words - if you want some class to ever override others - just put it on end of your css file.

P.S. But don't forget that more specific rules has more priority, like .a.b {} is more powerful than just .a{}

edited Mar 24 '20 at 12:18

answered Feb 05 '13 at 06:50

S Panfilov

16,641
17
74
96

CSS multiple classes property override

5 Answers5

Linked