title: css last-child matches all children
body: <p>I am trying to use create a separator between my links by creating a border on the right side of each of them.  Then on the last one, remove it.  I have the following html and css but what I'm finding is that each "a" tag matches the last-child selector.  I'm not clear why and what the proper way would be to do this.  </p>
  
  <pre><code>&lt;ul class="nav"&gt;
    &lt;li&gt;&lt;a href="#"&gt;link1&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="#"&gt;link2&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="#"&gt;link3&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="#"&gt;link4&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
  
  
  .nav a { border-right:solid 1px #000;}
  .nav a:last-child { border-right-width:0px;}
  </code></pre>