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

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

• javascript
• html
• css

• Possible duplicate of stackoverflow./questions/17727739/… – Harry Commented Jun 10, 2016 at 12:32
• You answer your own question: class added at the **last** has **highest priority** - your last class is .myStyle, so... – somethinghere Commented Jun 10, 2016 at 12:37
• i mean to say at the time of using class name like this <p class="mystyle hello"> @somethinghere – Pardeep Jain Commented Jun 10, 2016 at 12:39
• 2 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 Commented Jun 10, 2016 at 12:40
• 1 Jup! In HTML, all classes are the same = it will use CSS to determine what is more important. – somethinghere Commented Jun 10, 2016 at 12:45

3 Answers 3

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 pared to the .hello and hence, you get the red background.

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>

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