Precedence of Multiple Classes Defining Color Property Being Set by Declaration Order Rather Than Specification Order

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.

Multiple !important class declarations and precedence

According to this source: http://www.boogiejack.com/CSS_4.html

class2 should override the class1 styling.

Order of Specification: As a last
resort, when all other conflict
resolution specifications cannot
determine which style should take
precedence, the last style specified
will be the style used.

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.

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 }

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.

Css class priority when Adding Dynamic Class

Your div is red instead of blue because of your style declaration order:

.hello {
  background-color: blue;
}

.mystyle {
  background-color: red;
}

CSS specificity is not dependent on the order in which you apply the class to an element, but rather the order in which you declare the class in the style. In this case, you have declared .hello then .mystyle, meaning .mystyle has high specificity compared to the .hello and hence, you get the red background.

What determines the order CSS is specified between two elements when loaded from different files?

If the selectors are identical, it comes down to order... order within the CSS and the DOM. So, the question is, where did you place the dynamically generated <link> (or <style>) in relation to the original <link> (or <style>)? The order within the DOM matters.

If you'd like to make sure that your dynamically created CSS gets evaluated first, add it to the top of the <head>:

document.head.insertBefore(myLink, document.head.firstChild);

If you'd like it to be evaluated last, append it to the <body>:

document.body.appendChild(myLink);

Whichever rule is evaluated last will be the one applied (barring use of !important)

Here's an example:

<!DOCTYPE html><html>  <head>    <style>      p {        color: green;      }    </style>  </head>  <body>    <p>test</p>      <script>      (function() {
        var red = document.createElement("style");        red.textContent = "p { color: red }";        // We'll add this to the top of head. You'll never even notice because it will        // be overridden by the existing green style.        document.head.insertBefore(red, document.head.firstChild);
        var blue = document.createElement("style");        blue.textContent = "p { color: blue }";        // We'll add this to the end of the body after a three second delay. It will         // override the other styles.        setTimeout(function() {          document.body.appendChild(blue);        }, 3000);
      })();    </script>  </body></html>

Is it possible to give one CSS class priority over another?

1. specify a more specific selector, eg prefix an ID before it or prefix the nodename before the class
2. assign it after the other class
3. if two classes are in separate files, import the priority file second
4. !important

!important is the lazy way, but you really should go for #1 to avoid important-ception. Once you've added one !important you can't use it to make some other rule even more important.

Why does the UA's link color beat an author's color for (say) body?

There is a second order to the cascade and that's the order of which selectors override which other selectors.

For example, if you define in your stylesheet:

body { color: green; }
h1 { color: purple; }

the h1 has higher order of importance and will OVERRIDE the greenness of the body.

As to the general order of the cascade, this is the correct order, but you have to realize that user agent declarations vs. the things you define in a stylesheet are overridden SEPERATELY FOR EACH ELEMENT.

For example, let's say that the user agent has defined:

body { font-size: 10px; }
h1 { font-size: 20px; }
a { color: purple; }

and you are defining in your stylesheet:

body { font-size: 30px; color: green; }

Everything in the body will be 30px green except for those other two tags that the user agent stylesheet has already defined. You have to override ALL of them. Not just one user agent definition must be overridden but ALL OF THEM have to be overridden. Your styles WILL take precedence over the user agent stylesheet. Just gotta be careful to catch them all.

This is officially termed "inheritance". You're right, I guess the writers of w3 didn't specify explicitly how only one element at a time from the UA stylesheet gets overridden by your own personal stylesheet. They maybe thought it was obvious but they should probably add into the official documentation how the two should "mesh together", here, in this official documentation of inheritance: w3.org/TR/CSS2/cascade.html

They did mention it in the wiki, I think we've discussed, so I'll include it in the answer, as well: w3.org/wiki/Inheritance_and_cascade

More important than !important (a higher level !important)?

No, there is no keyword or other way to make a declaration more important than !important. There is no known activity to change this.

In general, it is possible to override a declaration that has !important by using a rule that also has it and that has higher specificity. However, a declaration in a style attribute has, by definition, higher specificity than any other author declaration. The only way to defeat it is in CSS is to use a user style sheet with !important.

There are non-CSS solutions, but they are rather obvious, such as using JavaScript to simply remove or modify the style attribute.

---

Related Topics