CSS new class does not override specific element style?

Question

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>

css specificity rules state that inline styles have higher specificity than any stylesheet styles `document.getElementById("main").style.backgroundColor = "green";` rules the roost — Jaromanda X, Oct 24 '17 at 05:48

Asim K T · Answer 1 · 2017-10-24T06:07:11.567

2

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?

edited Oct 24 '17 at 06:07

answered Oct 24 '17 at 05:48

Asim K T

16,864
10
77
99

1

to be clear ... `!important` is the **only** way to override inline style attribute – Jaromanda X Oct 24 '17 at 05:48

score 0 · Answer 2 · answered Oct 24 '17 at 05:50

0

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

answered Oct 24 '17 at 05:50

Gajanan Chitare

349
1
3
4

CSS new class does not override specific element style?

2 Answers2