Apply CSS to all but last element?

Question

I've got the following html:

<ul class="menu">
  <li><a>list item 1</a></li>
  <li><a>list item 2</a></li>
  ...
  <li><a>list item 5</a></li>
</ul>

I want to apply a border to all the <a> elements except the last one.

I've been trying this:

.menu a {   
  border-right: 1px dotted #ccc;
}
.menu a:last-of-type {
  border-right: none;
}

but I end up with a border on none of the elements, I guess because the <a> in each case is the last of type.

How can I do this? I'd prefer to use only CSS if possible, and I'd like IE9 compatibility if possible.

Answer 1

Change:

.menu a:last-of-type {
  border-right: none;
}

to:

.menu li:last-of-type a {
  border-right: none;
}

.menu a {   
  border-right: 1px dotted #ccc;
}
.menu li:last-of-type a {
  border-right: none;
}

<ul class="menu">
  <li><a>list item 1</a></li>
  <li><a>list item 2</a></li>
  <li><a>list item 3</a></li>
  <li><a>list item 4</a></li>
  <li><a>list item 5</a></li>
</ul>

As you surmised, the rule you were using was targeting every a because it was the last child within each li. Just move the :last-of-type to the li instead.