Multiple CSS Classes: Properties Overlapping based on the order defined

Question

Is there a rule in CSS that determines the cascading order when multiple classes are defined on an element? (class="one two" vs class="two one")

Right now, there seems to be no such effect.

Example: both divs are orange in color on Firefox

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">

<html>
  <head>
    <style>
      .one { border: 6px dashed green }
      .two { border: 6px dashed orange }
    </style>
  </head>

  <body>

  <div class="one two">
    hello world
  </div>

  <div class="two one">
    hello world
  </div>

See [similar question here](http://stackoverflow.com/q/13849655/287948), where the focus is the W3C standard that specify how to interpret multiple names. — Peter Krauss, Dec 12 '12 at 23:31
It's good to note that if you have a class applied to a specific element, a general class won't override it, i.e. if your style looks like div.one .two, two will not override div.one. (tested in Safari) — paulrehkugler, Mar 11 '13 at 20:45

edl · Accepted Answer · 2012-11-03T16:28:40.617

90

It depends on which one is declared last in your stylesheet. For example,

.one { border: 6px dashed green }
.two { border: 6px dashed orange }

vs

.two { border: 6px dashed green }
.one { border: 6px dashed orange }

edited Nov 03 '12 at 16:28

answered Jun 17 '10 at 23:40

edl

3,194
22
23

10

**Note the stylesheet link sequence in head element also important to define which will be declared first**. I just realize this and put the jquery UI css link down to the before head closing tag to avoid my css overwrite jquery UI css when the classes have the same weight/specificity (0,1,0,0), we can still overwrite then by use selector more specific like using ID or select more than one classes like `.parent .one`. – CallMeLaNN Nov 09 '11 at 02:11

score 29 · Answer 2 · answered Jun 17 '10 at 23:40

29

The class defined last in the CSS is what wins in these cases. The order on the element doesn't matter, this is consistent across all browsers that I'm aware of, I'll try and ind the relevant spec bits.

The entire class doesn't win, the properties individually win, if the .one had a property that .two didn't you would of course see that property on both of these <div> elements.

answered Jun 17 '10 at 23:40

Nick Craver

623,446
136
1,297
1,155

Just noting: There actually is a difference (read: bug) in IE6 using multiple-class rules. Doesn't apply in this simple case though. :) – deceze Jun 17 '10 at 23:45
@deceze - Only in IE6, which I tend to disregard at this point...but yes that only applies to *rules*, not *uses*, e.g. `.two.one` vs `.one.two` in the CSS. – Nick Craver Jun 17 '10 at 23:48
so this gets _really_ nice when working with already made stylesheets like bootstrap... – My1 Nov 11 '15 at 13:13

score 6 · Answer 3 · edited Feb 01 '14 at 12:46

6

The order of the class attribute doesn't matter one bit. It depends on several things, in your case it's the order in which your css is written.

Both styles have the same specificity, so the .two style overrides the style of .one because it's lower in the style tag.

edited Feb 01 '14 at 12:46

BenMorel

34,448
50
182
322

answered Jun 17 '10 at 23:41

Ben Rowe

28,406
6
55
75

score 6 · Answer 4 · answered Jun 18 '10 at 00:33

As the other answers have noted, the order declared in the class attribute has no effect - the priority comes from the order of declarations in the CSS file.

However, if you really want to mock up something that allows you to "fake" priority in the class attribute, you could try:

   .one-first { border: 6px dashed green }
      .two-first { border: 6px dashed orange }

   .one { border: 6px dashed green }
      .two { border: 6px dashed orange }

And then

   <div class="one-first two"/>

and

   <div class="two-first one"/>

Will order the priority with the last one winning (in a similar vein to the CSS proprty that comes last taking priority.)

score 4 · Answer 5 · answered Jun 17 '10 at 23:55

4

When using multiple classes for defining an element stylesheet you can use the !important to override the "cascating" of stylesheet.

.one { border: 6px dashed green !important } 
.two { border: 6px dashed orange }

It will make your divs green.

answered Jun 17 '10 at 23:55

CARLOS LOTH

4,675
3
38
44

3

Try to avoid usage of `!important` – Serhii Koval Mar 15 '19 at 07:50

score 2 · Answer 6 · answered Jun 17 '10 at 23:44

I think it's clear that no such rule applies. The rule .one has the same specificity as the rule .two, so according to the CSS standard the properties in the .two block override those in the .one because the .two block appears later. No reference is made anywhere to the order of the words in the class attribute.

score 1 · Answer 7 · answered Jun 17 '10 at 23:40

1

the override will happen in the order in which the classes are declared. so .two always wins

answered Jun 17 '10 at 23:40

Sonic Soul

23,855
37
130
196

score 1 · Answer 8 · answered Jun 18 '10 at 00:31

When in doubt, view the page in FireBug. It will strike out the classes that are overridden and show the order which they are applied in the page.

Also note that inline styles will override those declared in an external stylesheet. If you want to break the cascading chain af applicability, you can use the !important declaration as in

p {margin: 10px 5px 0 10px !important}

This will cause the !important declration to override others regardless of position. Some see it as bad practice, but it can come in handy if used judiciously.

Multiple CSS Classes: Properties Overlapping based on the order defined

8 Answers8

Linked