title: Apply CSS to all but last element?
body: <p>I've got the following html:</p>
  
  <pre><code>&lt;ul class="menu"&gt;
    &lt;li&gt;&lt;a&gt;list item 1&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a&gt;list item 2&lt;/a&gt;&lt;/li&gt;
    ...
    &lt;li&gt;&lt;a&gt;list item 5&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>I want to apply a border to all the <code>&lt;a&gt;</code> elements except the last one. </p>
  
  <p>I've been trying this:</p>
  
  <pre><code>.menu a {   
    border-right: 1px dotted #ccc;
  }
  .menu a:last-of-type {
    border-right: none;
  }
  </code></pre>
  
  <p>but I end up with a border on none of the elements, I guess because the <code>&lt;a&gt;</code> in each case is the last of type. </p>
  
  <p>How can I do this? I'd prefer to use only CSS if possible, and I'd like IE9 compatibility if possible. </p>