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

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>

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

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

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

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.

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

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.

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

Related

Recent Posts