Multiple CSS Classes: Properties Overlapping based on the order defined [duplicate]

Answer 1

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.

Answer 2

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

Answer 3

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.

Answer 4

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

Answer 5

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.

Answer 6

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.