CODEWITHSUNDEEP
javascriptcss
Free Bud
Free Bud

Reputation: 766

CSS new class does not override specific element style?

In the following code, the div "main" switches from class "main1" to "main2". Testing demonstrates that the new class is applied (size changes from 100x200 to 200x100), however the new class does not override the background-color assigned previsouly to the div. Is this the normal behavior?

<!DOCTYPE html>
<html>
  <head>
    <style>
      .main1 {width:100px; height:200px; background-color:yellow;}
      .main2 {width:200px; height:100px; background-color:orange;}
    </style>
    <script>
      function start() {
        document.getElementById("main").style.backgroundColor = "green";
        document.getElementById("main").className = "main2";
      }
    </script>
  </head>
  <body onload="start();">
    <div id="main" class="main1"></div>
  </body>
</html>

Upvotes: 1

Views: 2130

Answers (2)

Asim K T
Asim K T

Reputation: 18154

Inline style (green) have more precedence over class styles.(yellow and orange. So inline styles will be applied in this case unless you have a more precedented selector say something using !important

check this answer: What is the order of precedence for CSS?

Upvotes: 2

Gajanan Chitare
Gajanan Chitare

Reputation: 347

Because Inline CSS loaded first, If any how you wants to apply background-color:orange; then add !important like background-color:orange !important;

Upvotes: 0

Related Questions