title: CSS first child hover with a element
body: <p>I'm trying to get the first a:hover in a div to have a different right-margin, but none of the solutions I've found on this forum seem to be recognized by the browser (I'm using Chrome Version 45.0.2454.93 m). </p>
  
  <p>The html:</p>
  
  <pre><code> &lt;div id="example"&gt;
       &lt;a href="something1.html"&gt;Link 1&lt;/a&gt;
       &lt;a href="something2.html"&gt;Link 2&lt;/a&gt;
       &lt;a href="something3.html"&gt;Link 3&lt;/a&gt;
   &lt;/div&gt;
  </code></pre>
  
  <p>The CSS:</p>
  
  <pre><code>a:hover {
      margin: 0px -1px;
  }
  
  #example:first-child:hover {
      margin-left: 0px;
  }
  </code></pre>
  
  <p>This is being completely ignored, and just using the a:hover margin on hover.</p>
  
  <p>Full source code below: </p>
  
  <p>HTML: </p>
  
  <pre><code>&lt;!doctype html&gt;
  &lt;html&gt;
      &lt;head&gt;
          &lt;meta charset="utf-8"&gt;
          &lt;title&gt;removed&lt;/title&gt;
          &lt;link href="css/main.css" rel="stylesheet" type="text/css"&gt;
      &lt;/head&gt;
  
      &lt;body&gt;
          &lt;div id="container"&gt;
              &lt;div id="heading"&gt;
                  &lt;h2&gt;HOME&lt;/h2&gt;
                  &lt;hr&gt;
                  &lt;h3&gt;removed&lt;/h3&gt;
              &lt;/div&gt;
  
              &lt;img src="images/css_dev_smaller.png" alt="" width="5472" height="3648" id="image_main" /&gt;
          &lt;/div&gt;
          &lt;div id="nagivation"&gt;
              &lt;a href="index.html"&gt;Home&lt;/a&gt; | &lt;a href="removed.html"&gt;removed&lt;/a&gt; | &lt;a href="removed.html"&gt;removed&lt;/a&gt;
          &lt;/div&gt;
      &lt;/body&gt;  
  &lt;/html&gt;
  </code></pre>
  
  <p>CSS: </p>
  
  <pre><code>@charset "utf-8";
  html,body {
      margin: 0px;
      padding: 0px;
      border: 0px;
      height: 100%;
      width: 100%;
      background: #fff;
  }
  
  h2,h3 {
      font-family: Segoe, "Segoe UI", Verdana, "DejaVu Sans", "Trebuchet MS", sans-serif;
      font-weight: 100;
      padding: 0px;
  }
  
  h2 {
      margin-bottom: -14px;
      margin-top: 40px;
  
  }
  
  h3 {    
      margin-top: -5px;
      margin-bottom: 55px;
  }
  
  hr {
      width: 100%;
      border-color: #bdbbc2;
      border-width: 1px 0px 0px 0px;
      height: 1px;
  }
  
  #container {
      display: inline-block;
      text-align: center;
      display: block;
      margin: 0 auto;
      min-width: 51%;     
      padding-top: 10%;
  }
  
  #heading {
      display: inline-block;
      width: 15%; 
      min-width: 200px;
      padding-right: 10px;
      vertical-align: top;
      text-align: left;
  }
  
  #image_main {
      display: inline-block;      
      width: 35%;
      min-width: 250px;
      height: auto;
      margin: 0px auto;   
      padding: 0px;
  }
  
  #nagivation {
      margin: 50px auto;
      text-align: center;
  }
  
  a:link, a:visited {
      font-family: Segoe, "Segoe UI", Verdana, "DejaVu Sans", "Trebuchet MS", sans-serif;
      text-decoration: none;
      color: #000000;
  }
  
  a:hover {
      font-weight: 600;
      margin: 0px -1px;
  }
  
  #navigation a:first-child:hover {
      margin: 0px -1px 0px 0px;
      color: #B72C2F;  /* TESTING */
      font-size: 20px; /* TESTING */
  }
  </code></pre>