Does the Order of Classes Listed on an Item Affect the Css

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.

Multiple CSS Classes: Properties Overlapping based on the order defined

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 }

class overrule when two classes assigned to one div

Multiple classes can be assigned to a div. Just separate them in the class name with spaces like this:

<div class="rule1 rule2 rule3">Content</div>

This div will then match any style rules for three different class selectors: .rule1, .rule2 and .rule3.

CSS rules are applied to objects in the page that match their selectors in the order they are encountered in the style sheet and if there is a conflict between two rules (more than one rule trying to set the same attribute), then CSS specificity determines which rule takes precedence.

If the CSS specificity is the same for the conflicting rules, then the later one (the one defined later in the stylesheet or in the later stylesheet) takes precedence. The order of the class names on the object itself does not matter. It is the order of the style rules in the style sheet that matters if the CSS specificity is the same.

So, if you had styles like this:

.rule1 {
    background-color: green;
}

.rule2 {
    background-color: red;
}

Then, since both rules match the div and have exactly the same CSS specificity, then the second rule comes later so it would have precedence and the background would be red.

---

If one rule had a higher CSS specificity (div.rule1 scores higher than .rule2):

div.rule1 {
    background-color: green;
}

.rule2 {
    background-color: red;
}

Then, it would take precedence and the background color here would be green.

---

If the two rules don't conflict:

.rule1 {
    background-color: green;
}

.rule2 {
    margin-top: 50px;
}

Then, both rules will be applied.

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

---

Related Topics