Css class priority when Adding Dynamic Class

Question

Got confuse related to priority level of classes in css, i know the class added at the last has highest priority, but here in my case i thought i was wrong i am adding class dynamically to div, but classes are not working properly

<p>Click the button to add the "mystyle" class to DIV.</p>

<script>
    function myFunction() {
    document.getElementById("myDIV").classList.add("mystyle","hello");
}
</script>

<style>
.hello{
background-color: blue;
}
.mystyle {
    background-color: red;
}
</style>

why div showing red color instead of blue ?

Working Example

Possible duplicate of http://stackoverflow.com/questions/17727739/precedence-of-multiple-classes-defining-color-property-being-set-by-declaration — Harry, Jun 10 '16 at 12:32
You answer your own question: `class added at the **last** has **highest priority**` - your last class is `.myStyle`, so... — somethinghere, Jun 10 '16 at 12:37
i mean to say at the time of using class name like this `
` @somethinghere — Pardeep Jain, Jun 10 '16 at 12:39
Yeah I realised reading @kevinto s answer below! The declaration of classes in HTML is unrelated to their importance or when they were added, it's all evaluated based on the rules in CSS, not rules in HTML. — somethinghere, Jun 10 '16 at 12:40
ohh okay that mean declaration of classes in HTML does't matter at all right ? @somethinghere — Pardeep Jain, Jun 10 '16 at 12:42
Jup! In HTML, all classes are the same = it will use CSS to determine what is more important. — somethinghere, Jun 10 '16 at 12:45

Kevin · Accepted Answer · 2016-06-10T12:40:38.693

5

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.

edited Jun 10 '16 at 12:40

answered Jun 10 '16 at 12:34

Kevin

367
1
8

Good answer, you picked up on the confusion that the order of classes defined in HTML has nothing to do with their importance. I missed that! – somethinghere Jun 10 '16 at 12:38
Great answer, that mean declaration of classes in HTML does't matter at all right ? could you please provide any link where mentioned about all this ? – Pardeep Jain Jun 10 '16 at 12:43
There isn't really a link refuting this, but start by reading up on CSS Selectors (https://developer.mozilla.org/en/docs/Web/Guide/CSS/Getting_started/Selectors), and just keep in mind that CSS is the document that will define layout. The reason would be that it decouples your code - so if you wanted to make the other class more prominent in the future, you only have to change your CSS file, not how JS adds it everywhere or where the HTML has declared it. – somethinghere Jun 10 '16 at 12:47
@PardeepJain, see the answer to this question here: http://stackoverflow.com/questions/13849655/how-to-interpret-html-multiple-class-names-in-the-css-renderization-what-w3c-sa, and also the link that the answer refers to for the spec: https://www.w3.org/TR/REC-CSS1/#cascading-order – Kevin Jun 10 '16 at 12:50
okay thanks alot for answer and info that you provided @kevinto , thanks to you too `@somethinghere` . – Pardeep Jain Jun 10 '16 at 12:57

score 1 · Answer 2 · answered Jun 10 '16 at 12:44

1

It is a problem of hierarchy:

function myFunction() {
    document.getElementById("myDIV").classList.add("mystyle","hello", "red-background");
}

#myDIV.hello{
background-color: blue;
}
.mystyle {
    background-color: red;
}
.mystyle {
    width: 300px;
    height: 50px;
    background-color: red;
    color: white;
    font-size: 25px;
}

<p>Click the button to add the "mystyle" class to DIV.</p>

<button onclick="myFunction()">Try it</button>

<p><strong>Note:</strong> The classList property is not supported in Internet Explorer 9 and earlier versions.</p>

<div id="myDIV">
I am a DIV element
</div>

answered Jun 10 '16 at 12:44

Teuta Koraqi

1,898
1
10
28

as said by @somethinghere in above comments `The declaration of classes in HTML is unrelated to their importance or when they were added, it's all evaluated based on the rules in CSS, not rules in HTML` than why your div showing blue color instead of res, because red is defined after blue in css ? whats going on here ? – Pardeep Jain Jun 11 '16 at 05:11
I made a fiddle, here you can find all explanation for that: https://fiddle.jshell.net/zd8mzxg3/4/ – Teuta Koraqi Jun 13 '16 at 07:59

score 1 · Answer 3 · answered Jun 10 '16 at 12:49

because interpreter at first read class .hello then class .mystyle ... that div have both classes ... when your classes been added priority of .mystyle class up from .hello ...

<style>
    .mystyle {
       background-color: red;
    }
   .hello{
      background-color: blue;
   }

</style>

here you can see working example

Css class priority when Adding Dynamic Class

3 Answers3