Does The Order of Styles Matter

does the order of styles matter?

If the rules are equal in specificity (in this case they are), individual rules get overridden in the order they're defined in the CSS, so in your example red wins because it comes later in the CSS definitions. The same rule applies in other cases as well, for example:

<div class="red green">

Which of these wins?

.green { color: green; }
.red { color: red; }

.red wins here, it doesn't matter the order in the class attribute, all that matters is the order the styles are defined in the CSS itself.

Does order of class selectors matter?

All of these would be applied, since the order is not relevant. The later rules will overwrite the previous ones if they contain settings for the same parameters, just due to the order in the stylesheet.

Does the order of css stylesheet definitions matter?

There is a defined cascade in which the styles are sorted and applied.
When declarations have the same importance (weight), origin and specificity then the latter declaration wins. Most answers cover importance and specificity here but not origin.

Here are some very good slides about CSS Cascades. (Overview all resources)

Does the order of parameters in classList methods matter?

No, it doesn't matter in the classList as you just adding a class to the element,

Also, the order at CSS in most cases doesn't matter, only in some cases it matters, It comes up any time multiple CSS selectors match an element with the exact same specificity.

Does the order of CSS styles matter?

The order doesn't matter in this case.

You are missing units for the padding-right property. Running your code through a validator will flag errors like this.

Should the order of CSS files in a HTML page matter?

Short answer: Yes.

This is actually a subject I taught just last week, and I'll tell you a brief version of a one-hour class I told my students:

Bootstrap first to establish the framework
Follow with any supporting stylesheet (Owl.css, plugins.css, etc)
Next is your custom stylesheet. This is to override all of the above.
Lastly, the responsive stylesheet. This one will override all of the above systematically and programatically according to the media queries conditions being satisfied in the browser.

Doing this type of architecture will reduce the amount of (important!) drastically.

Does the order of rules in a CSS stylesheet affect rendering speed?

After some more testing and reading I came to the following conclusion, no, it does not matter. Even after some ‘extreme’ testing, I could not find anything that supports the idea that the order matters.

There were no 'flashed of unstyled content' or the likes, it just took way longer to load the page ( way way longer :D )

Tests I ran
I created a test page with 60.000 div elements, each having a unique ID attribute. Each of these ID’s had their own css rule applied to it. Below that I had a single span element with a CLASS attribute, which was also had a css rule linked to it.

These tests created a html file of 2MB with a corresponding css file of 6MB.

At first I attempted these tests with 1.000.000 divs and css rules, but Firefox did not approve and started crying, begging me to stop.

I generated these elements and their css with the following simple php snippets.

<?PHP

    for ($i = 0; $i < 60000; $i++) {
        echo "
#test$i {
    position: absolute;
    width: 1px;
    height: 1px;
    top: " . $i . "px;
    left: 0;
    background: #000;
} <br />
";
    }

?>

And

<?PHP

    for ($i = 0; $i < 60000; $i++) {
        echo "
<div id=\"test$i\"></div>
";
    }

?>

The result was put in a html and css file afterwards to check the results.

Mind you, my browser ( Firefox 5 ) really did not appreciate me playing around with this, it really had some issues generating the output, the occasional this program is not responding message was not afraid to show it's face.

These tests were ran on a localhost, ran by a simple XAMPP installation, it might be possible that external servers result in a different resultset, but I am currently unable to test that.

I tested a few variations on the above:

Placing the element before all the generated divs, in the
middle and at the end
Placing the span’s css definition before, in the middle or at the end
of the css file.

Oh and may I suggest: http://www.youtube.com/watch?v=a2_6bGNZ7bA while it doesn't exactly cover this question, it does provide some interesting details about how Firefox ( and possibly other browsers )work with the stuff we throw at it.

What is the order of precedence for CSS?

There are several rules ( applied in this order ) :

inline css ( html style attribute ) overrides css rules in style tag and css file
a more specific selector takes precedence over a less specific one
rules that appear later in the code override earlier rules if both have the same specificity.
A css rule with !important always takes precedence.

In your case its rule 3 that applies.

Specificity for single selectors from highest to lowest:

ids (example: #main selects <div id="main">)
classes (ex.: .myclass), attribute selectors (ex.: [href=^https:]) and pseudo-classes (ex.: :hover)
elements (ex.: div) and pseudo-elements (ex.: ::before)

To compare the specificity of two combined selectors, compare the number of occurences of single selectors of each of the specificity groups above.

Example: compare #nav ul li a:hover to #nav ul li.active a::after

count the number of id selectors: there is one for each (#nav)
count the number of class selectors: there is one for each (:hover and .active)
count the number of element selectors: there are 3 (ul li a) for the first and 4 for the second (ul li a ::after), thus the second combined selector is more specific.

A good article about css selector specificity.

Does the order of classes listed on an item affect the CSS?

I have to disagree slightly with Jon and Watson's answers, as...

Yes, it Can (depending on the statement)

Your question is:

Does the ordering of CSS classes on a DOM element affect the statement priority?

Which does depend on the statement in question.

HTML Ordering Does Not Typically Matter

The following are equivalent when it comes to a straight call to a class (i.e. .class1 or .class2) or to a combined call (i.e. .class1.class2 or .class2.class1):

<div class="class1 class2"></div>
<div class="class2 class1"></div>

Cases Where Statement Priority for above HTML Can be Affected Based on HTML Order

The main place where ordering in HTML matters is with the use of attribute selectors in your CSS.

Example 1 Fiddle using the following code seeking to match attribute value will NOT have any change in font color, and each div will have different properties because of the ordering of the classes:

[class="class1"] {
    color: red;
}

[class="class1 class2"] {
    background-color: yellow;
}

[class="class2 class1"] {
    border: 1px solid blue;
}

Example 2 Fiddle using the following code seeking to match beginning of attribute value will NOT have any change in font color for the second div, and each div will have different properties because of the ordering of the classes:

[class^="class1"] {
    color: red;
}

[class^="class1 class2"] {
    background-color: yellow;
}

[class^="class2 class1"] {
    border: 1px solid blue;
}

Example 3 Fiddle using the following code seeking to match end of attribute value will NOT have any change in font color for the first div, and each div will have different properties because of the ordering of the classes:

[class$="class1"] {
    color: red;
}

[class$="class1 class2"] {
    background-color: yellow;
}

[class$="class2 class1"] {
    border: 1px solid blue;
}

A Clarifying Statement about "Priority"

To be clear, in the cases above, what is affected as far as "statement priority" is concerned is really a matter of whether the statement actually applies or not to the element. But since the application or not is in a sense, the basic priority, and since the above are cases where such application is actually based on the ordering of the classes on the HTML Dom element (rather than the presence or absence of the class), I thought it worth adding this as an answer.

Possible Valid Use of Class Ordering?

This is a thought occurring to me, based on BoltClock's comment. Consider just two classes being used to style elements based on whatever factors are deemed critical to different styling. These two classes theoretically can replace the use of eleven different individual classes using the combination of attribute selectors (actually, as will be noted later, the possibilities are almost limitless with but a single class, but I'll discuss that in a moment since this post is about ordering of multiple classes). For these two classes we can style elements differently as follows:

Assuming these HTML Combinations

<div class="class1">Element 1</div>
<div class="class2">Element 2</div>
<div class="class1 class2">Element 3</div>
<div class="class2 class1">Element 4</div>

CSS Possibilities

/* simply has the class */
.class1 {} /* affects elements 1, 3, 4 */
.class2 {} /* affects elements 2-4 */
/* has only a single class */
[class="class1"] {} /* affects element 1 only */
[class="class2"] {} /* affects element 2 only */
/* simply has both classes */
.class1.class2 {} /* affects elements 3-4 */
/* has both classes, but in a particular order */
[class="class1 class2"] {} /* affects element 3 only */
[class="class2 class1"] {} /* affects element 4 only */
/* begins with a class */
[class^="class1"] {} /* affects elements 1 & 3 only */
[class^="class2"] {} /* affects elements 2 & 4 only */
/* ends with a class 
   NOTE: that with only two classes, this is the reverse of the above and is somewhat
   superfluous; however, if a third class is introduced, then the beginning and ending 
   class combinations become more relevant.
*/
[class$="class1"] {} /* affects elements 2 & 4 only */
[class$="class2"] {} /* affects elements 1 & 3 only */

If I calculate right, 3 classes could give at least 40 combinations of selector options.

To clarify my note about "limitless" possibilities, given the right logic, a single class can potentially have imbedded in it code combinations that are looked for via the [attr*=value] syntax.

Is all this too complex to manage? Possibly. That may depend on the logic of exactly how it is implemented. The point I am trying to bring out is that it is possible with CSS3 to have ordering of classes be significant if one desired it and planned for it, and it might not be horribly wrong to be utilizing the power of CSS in that way.

Does The Order of Styles Matter