title: HTML / CSS Anchor Tag Style Specificity
body: <p>I'm working on a project that has these requirements:</p>
  
  <ol>
  <li>When hovering over a section with anchors, the colors of all anchors in that section (non hover/active state) change.</li>
  <li>The active/hover state color of these anchors should inherit the normal anchor active/hover color.</li>
  </ol>
  
  <p>I was able to achieve the first requirement, but the active/hover states don't change at all when hovering over the specific link.  It's obviously an issue with specificity, but I can't seem to figure out why.</p>
  
  <p>Here is a boiled down version of the code:  <a href="http://codepen.io/dbough/pen/maxrv" rel="nofollow">http://codepen.io/dbough/pen/maxrv</a></p>
  
  <pre><code>a:link, a:visited {
    color:green;
  }
  a:hover, a:active, header .color a:hover, header .color a:active {
    color:pink;
  }
  .color a:link, .color a:visited{
    color:red;
  }
  
  $("header").hover(function() {
    $("header").addClass("color");
          },
          function() {
              $("header").removeClass("color");
          }
      )
  </code></pre>