title: CSS new class does not override specific element style?
body: <p>In the following code, the div "main" switches from class "main1" to "main2".
  Testing demonstrates that the new class <strong>is</strong> applied (size changes from 100x200 to 200x100),
  however the new class does <strong>not</strong> override the background-color assigned previsouly to the div.
  Is this the normal behavior?</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
    &lt;head&gt;
      &lt;style&gt;
        .main1 {width:100px; height:200px; background-color:yellow;}
        .main2 {width:200px; height:100px; background-color:orange;}
      &lt;/style&gt;
      &lt;script&gt;
        function start() {
          document.getElementById("main").style.backgroundColor = "green";
          document.getElementById("main").className = "main2";
        }
      &lt;/script&gt;
    &lt;/head&gt;
    &lt;body onload="start();"&gt;
      &lt;div id="main" class="main1"&gt;&lt;/div&gt;
    &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>