title: :nth-child not working on anchor tags
body: <p>I am trying to design a page template with a header, side bar, footer and content section. Everything is fixed  except the content section scrolls on overflow.</p>
  
  <p>The header contains a basic navigation bar comprising of an unordered list, four list items and four anchor tags which link to the normal 'home' 'content''about' 'contact' pages.</p>
  
  <p>Each link needs a right border, except the last (4th) one. They are solely to visually separate each one. </p>
  
  <p>Here's the code:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>#top-nav {
    background-color: orange;
    height: 68px;
    margin: 0;
    padding: 0;
  }
  
  #top-nav ul {
    font-size: 0;
    margin: 0;
    padding: 0;
  }
  
  #top-nav li {
    list-style-type: none;
    text-align: center;
    height:68px; /*100%, border     doesn't span full height*/
    margin: 0;
    border-right: 1px solid black;
    padding: 23.5px 95px;
    display: inline-block;
  }
  
  #top-nav li:nth-child(4) {
    border-right: none;
  }
  
  #top-nav a {
    text-decoration: none;
    color: black;
    height: 100%;
    margin: 0;
    padding: 0;
    font-size: 16px;
    display: block;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!--  &lt;PAGE HEADER&gt;  --&gt;
  &lt;div id="header"&gt;
    &lt;header&gt;
  
      &lt;!--  &lt;HEADER TITLE&gt;  --&gt;
      &lt;div id="header-title"&gt;
        &lt;h1&gt;Page Header&lt;/h1&gt;
      &lt;/div&gt;
      &lt;!--  &lt;/HEADER TITLE&gt;  --&gt;
  
      &lt;!--  &lt;HEADER NAVBAR&gt;  --&gt;
      &lt;div id="top-nav"&gt;
        &lt;ul&gt;
          &lt;li&gt;&lt;a href="#"&gt;Home&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;Content&lt;/a&gt; &lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;About&lt;/a&gt; &lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;Contact&lt;/a&gt; &lt;/li&gt;
        &lt;/ul&gt;
      &lt;/div&gt;
      &lt;!--  &lt;/HEADER NAVBAR  --&gt;
  
    &lt;/header&gt;
  &lt;/div&gt;
  &lt;!--  &lt;/HEADER&gt;   --&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>This code works as expected.</p>
  
  <p>What I want to do is move the styling aspects to the anchor tag. </p>
  
  <p>When I transfer the styles to the anchor tag and change the <code>nth-child</code> to a instead of li, it doesn't work.</p>
  
  <p>I have also tried <code>:last-child</code>, but it has the same outcome, works on li but not on a.</p>
  
  <p><strong>EDIT:</strong></p>
  
  <p>Here's the CSS:</p>
  
  <pre><code>#top-nav {
      background-color:orange;
      height:68px;
      margin:0;
      padding:0;
  } 
  
  #top-nav ul {
      font-size:0;
      margin:0;
      padding:0;
  } 
  
  #top-nav li {
      list-style-type:none;
      text-align:center;
      height:68px; /*100%, border     doesn't span full height*/
      margin:0;
  /*  border-right:1px solid black;*/
  /*  padding:23.5px 95px;*/
  display:inline-block;
  } 
  
  #top-nav a {
      text-decoration:none;
      color:black;
      height:100%;
      margin:0;
      border-right:1px solid black;
      padding:23.5px 95px;
      font-size:16px;
      display:block;
  
  
  #top-nav a:nth-child(4) {
      border-right:none;
  }
  </code></pre>
  
  <p>Any help will be greatly appreciated.</p>