javascript - Css class priority when Adding Dynamic Class - Stack Overflow

admin管理员组

文章数量:1405315

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

Share Improve this question Follow asked Jun 10, 2016 at 12:27 Pardeep JainPardeep Jain 86.8k3838 gold badges171171 silver badges219219 bronze badges 7

• 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

 |  Show 2 more ments

3 Answers 3

Sorted by: Reset to default 6

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

本文标签： javascriptCss class priority when Adding Dynamic ClassStack Overflow