title: CSS hover recursively on all child elements
body: <p>I am attempting to change the background-color attribute on ALL child elements of root on hover.  I have tried the following:</p>
  
  <pre><code>.app_setting *:hover { background-color: yellow; }
  
  *:hover { background-color: yellow; }
  
  html *:hover {background-color: yellow; }
  
  &lt;html class="parent"&gt;
  &lt;/html&gt;
  
  .parent *:hover {background-color: yellow; }
  </code></pre>
  
  <p>I have also tried these links: </p>
  
  <p><a href="https://stackoverflow.com/questions/137449/css-for-hover-that-includes-all-child-elements">CSS for hover that includes all child elements</a></p>
  
  <p><a href="https://stackoverflow.com/questions/16348332/css-hover-to-affect-all-child-divs">CSS :hover to affect all child divs</a></p>
  
  <p>The above seems to only affect and change the background-color of <code>&lt;a&gt;</code> tags.  Besides using javascript or assigning each element to a specific class is their another way to do this using CSS?</p>
  
  <p>EDIT:</p>
  
  <p>Fiddle deleted as this is a homework assignment and I do not want to share code BUT,</p>
  
  <p>The fiddle DOES change child elements background-color attribute with</p>
  
  <pre><code>body *:hover {
      background-color: yellow;
  
  }
  </code></pre>
  
  <p>as it is expected to.  <strong><em>But when opened in an HTML doc background-color is only applied to <code>&lt;a&gt;</code> tags.</em></strong> I have tried with the same effect in Firefox and Chrome.</p>
  
  <p>Above problem was simple just needed to add a valid doctype.</p>
  
  <pre><code>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
          "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"&gt;
  </code></pre>