title: Change CSS class by Javascript when default class is set by ID
body: <p>I have a DIV that has CSS applied to it in an external stylesheet by ID, such as:</p>
  
  <pre><code>&lt;div id="myFavoriteDIVever"&gt;Stuff&lt;/div&gt;
  
  #myFavoriteDIVever {
      display: none;
  }
  </code></pre>
  
  <p>Then, in a Javascript function, I set the following class to that same DIV:</p>
  
  <pre><code>document.getElementById('myFavoriteDIVever').className = 'superCoolClass';
  
  .superCoolClass {
      display: block;
  }
  </code></pre>
  
  <p>For some reason, when I do it this way, the DIV is not set to display as block. It remains not displayed in the DOM. But if I change it so the DIV has a default CSS class applied to it that sets display: none; then I set a different CSS class to it with Javascript later that sets display: block; it works as expected and displays the DIV as a block element.</p>
  
  <p>Why would the CSS class override the ID CSS? So, when I apply a new className it should override the #element settings. No?</p>