How to Specify The Order of CSS Classes

How to specify the order of CSS classes?

The order in which the attributes are overwritten is not determined by the order the classes are defined in the class attribute, but instead where they appear in the CSS.

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

<div class="myClass2 myClass1">Text goes here</div>

What is the order of precedence for CSS?

There are several rules ( applied in this order ) :

1. inline css ( html style attribute ) overrides css rules in style tag and css file
2. a more specific selector takes precedence over a less specific one
3. rules that appear later in the code override earlier rules if both have the same specificity.
4. 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 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.

CSS classes applied in wrong order

Now properties of red are applied first then overridden by green then by blue

That's not how CSS works. The order of the classes in the class list has nothing whatsoever to do with the precedence of the rules those classes apply to the element.

CSS rules are applied by

• The specificity of the rule
• The order of the rule in the CSS (not the class list) relative to other rules with the same specificity (e.g., later rules win)
• Whether the rule has an !important flag

More in the specification.

Example:

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

<div class="red green blue">red green blue</div><div class="blue green red">blue green red</div>

In what order and how exactly the CSS classes are applied?

CSS rules are applied in order of the cascade.

Sort according to importance (normal or important)

None of your rules are !important so that has no influence.

and origin (author, user, or user agent).

All of your rules come from the author stylesheet, so that has no influence.

Sort rules with the same importance and origin by specificity of selector

Since all your selectors consist of a single class selector, they have equal specificity, so that has no influence

Finally, sort by order specified: if two declarations have the same weight, origin and specificity, the latter specified wins.

They are therefore applied in the order they appear in the stylesheet.

(The order the class names appear in the class attribute is entirely irrelevant.)

AbC becomes abc on applying lowercase and then the capitalize was applied to the original text. i.e. on AbC not on abc as I thought.

The rule describes how the raw data should be presented. An overridden rule has no effect. It doesn't undergo multiple transformations.

Some properties allow multiple effects to be applied but they do that by accepting multiple values in a single rule (e.g. text-decoration: underline overline).

Order of precedence of CSS rules

It is still blue. Attribute selectors are on the same level as classes. For more information see: https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity

CSS classes, order of precedence

Specifying the element along with the class will give the selector priority over the parent definition. Try setting p.note { instead.

http://jsfiddle.net/3zfoqtd4/

Precedence of multiple classes defining color property being set by declaration order rather than specification order

The order of the classes as you specify them on the elements is irrelevant. It's the order that you define them in your style declarations that matters. The quote you posted means in the style declarations, not the order the classes are listed on the elements.

---

Related Topics