Multiple !Important Class Declarations and Precedence

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.

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.

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 }

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.

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 a new custom class take precedence over a differently named class from a previously loaded file?

Rule #1: CSS files are processed from top to bottom

That's why it's called "Cascading Style Sheet". Cascading from top to bottom is its natural order. Since you include bootstrap files followed by your custom files, your custom styles will win.

For example:

// Bootstrap declaration
.pt-0 {
    padding-top: 0 !important;
}

// Your custom styles
.pt-10 {
    padding-top: 10rem !important;
}

They both apply to the property padding-top, and they both have !important. So the later loaded styles will win!

Just want to clarify: the following works just because of the same reason: .pt-lg-0 is defined later in the file than where .pt-5 is defined.

<div class="pt-5 pt-lg-0">...</div>

.pt-5 is defined at line 8185 and .pt-lg-0 is defined at line 9157 in the bootstrap.css file.

Rule #2: selector with higher specificity wins

If there are many selectors apply to the same element property, the one with higher specificity wins.

For example, if your layout looks like this:

<div id="test-container" class="container">
    <div class="pt-10 pt-lg-0">
        ...
    </div>
</div>

and you have styles like this:

.container#test-container .pt-10 {
    padding-top: 0rem !important;
}

.container .pt-10 {
    padding-top: 5rem !important;
}

.pt-10 {
    padding-top: 10rem !important;
}

Then regardless of the style loading orders, the padding top would be 0rem because the ID selector has a higher specificity.

Rule #3: media queries have no specificity!

You thought the padding top will reset to 0 because you might think bootstrap has that padding-top: 0rem !imporant at large breakpoint? It won't. In fact, the rules inside media queries don't have precedence over other style rules in the same stylesheet.

Hence your .pt-10 takes precedence over the .pt-lg-0 class all the time, because of the Rule #1.

Solution

To get what you want, just simply remove !important from your custom class:

.pt-10 {
    padding-top: 10rem;
}

This will work because:

1. Your style is loaded after bootstrap, and there is no padding-top defined for the same element, so your 10rem padding top will apply!
2. At large breakpoint, since .pt-lg-0 from bootstrap has !important, that has higher precedence and hence will override your 10rem padding top style! If you put !important in your 10rem padding top style, then they will have the same specificity. Hence whoever defined later wins.

demo: https://jsfiddle.net/davidliang2008/9sqn4xch/16/

CSS attribute selectors taking precedence over normal CSS class selectors

I'd originally posted this as a comment, but perhaps I should've made it answer.

---

Let's look at the actual conditions of your two CSS rules:

div[class='example'] {color:green}

• Element must be a <div>
• Element must have class "example"

.example {color:blue}

• Element must have class "example"

---

Because your first CSS rule has two conditions, whereas your second rule only has one, the first rule is more specific - therefore it will take precedence.

If you were to remove the div portion from your first rule, it would be considered equivalent (as MDN states), at which point the text would be blue.

CSS class precedence and why I did I have to use the !important override?

If you change the order of css definitions for floatRight and textWhite ( write css style for textWhite at after of floatRight), you don't need to describe !important on textWhite style.

floatRight and textWhite are common styles, so it will be good to remove color style on floatRight selector.

.floatRight {
    color: gray;
    padding-top: 1mm;
    padding-bottom: 1mm;
    padding-right: 2mm;
    float: right;
    text-align: right;
    font-size: 8pt;
    font-weight: 700;
    text-transform: none;
}
.textWhite {
    color: #fff;
}

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.

---

Related Topics