title: change css attributes of child when parent class is changed
body: <p>I have a div inside another div. the parent has a particular class name that doesn't specifically have any css applied to it. the child element has css applied to it, specifically it's background color. so it looks like this...</p>
  
  <pre><code>&lt;div id='myparent' class='someclass'&gt;
      &lt;div id='mychild' class='somebgcolor'&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>what I want to do is change the background color of the child div when the class of the parent div is changed. so I'm changing the class of the parent with this javascript...</p>
  
  <pre><code>document.getElementById('myparent').className = 'someotherclass';
  </code></pre>
  
  <p>and in my css...</p>
  
  <pre><code>.someclass .somebgcolor {
      background-color: #369;
  }
  .someotherclass .somebgcolor {
      background-color: #401;
  }
  </code></pre>
  
  <p>but it doesn't work. for starters, the initial background color isn't even applied, and no background color is applied when i update the class of the parent div. am i missing something fundamental to the way applying css to nested elements works?</p>