Apply CSS to all but last element? : <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>
