Multiple !important class declarations and precedence

Question

Theoretically speaking, if you had this scenario:

<style type="text/css">
    .class1 {
        color:#F00 !important;
    }
    .class2 {
        color:#00F !important;
    }
</style>

<p class="class2 class1">Test</p>

Which color should take precedence? How do browsers determine precedence in this scenario?

Welcome to SO! Nice first question. Indeed, it's `class2` that gets used: http://jsfiddle.net/yd6Gy/ But why? Interested to see what comes up. — Pekka, Mar 29 '11 at 14:06
This question highlights why I feel that the `!important` flag was poorly designed. — Spudley, Mar 29 '11 at 14:09
@Spudley you are definitely right about that; however, as far as I understand the issue, `!important` is not important here. The same phenomenon would occur if you'd remove both of them — Pekka, Mar 29 '11 at 14:11

score 63 · Accepted Answer · edited Nov 22 '13 at 14:17

63

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.

edited Nov 22 '13 at 14:17

rafaelcosman

2,569
7
23
39

answered Mar 29 '11 at 14:05

Jan_V

4,244
1
40
64

14

+1 this is the in-depth info I was hoping for. The [MDC](http://webcache.googleusercontent.com/search?q=cache:0fgzBZMKlXEJ:https://developer.mozilla.org/en/Common_CSS_Questions+css+multiple+classes+w3c&cd=6&hl=de&ct=clnk&gl=de&source=www.google.de) puts it even more clearly: `If the same property is declared in both rules, the conflict is resolved first through specificity, then according to the order of the CSS declarations. The order of classes in the class attribute is not relevant. ` – Pekka Mar 29 '11 at 14:09
1

It seems this won't happen if you add 'class2' using JQuery .addClass method. – delphirules Oct 16 '17 at 16:18

score 14 · Answer 2 · edited Aug 27 '17 at 18:50

With two equally weighted selectors, the behavior is the same whether you apply !important to both or omit it from both.

<style type="text/css">
    .class1 {
        color: #F00; /* red */
    }
    .class2 {
        color: #00F; /* blue */
    }
</style>

The order of classes in the html class attribute is irrespective of each class selector's specificity level.

<p class="class2 class1">Test X</p>
<p class="class1 class2">Test Y</p>

Output

Test X → blue
Test Y → blue

If you use !important on just one selector class, then that one will take precedence (because it takes on a higher level of specificity).

Tim · Answer 3 · 2011-03-29T14:11:34.567

Since classes are all "equal important" when added to an element it doesn't matter in which order you assign them to your paragraph.

In this case, color in .class1 and .class2 are both declared as important, but because .class2 was declared after .class1 the browser will show your paragraph in blue, since it overwrites the declared color from .class1

Also, have a look at this: http://jsfiddle.net/3uPXx/1/ You can see it doesn't matter in which order you declare the class on your paragraph. Since both classes define the same attribute (color) it will be overwritten be the class which is declared last.

The only thing that can overwrite this is an inline-style with !important as you can see in the fiddle.

Multiple !important class declarations and precedence

3 Answers3

Linked