Question

I like to get the cleanest code if possible, so either via regular CSS or jQuery.
It has to be cross browser and work in IE.

The markup is a breadcrumb.

<div id="breadcrumb">
  <ul>
     <li><a href="#">Home</a></li>
     <li><a href="#">Sports</a></li>
     <li><a href="#">Football</a></li>
     <li><a href="#">Leagues/a></li>
  </ul>
</div>

So, I want to style this breadcrumb in 3 steps.

• The first a item
• The in between a items (so not first and not last)
• The last a item

I couldn’t figure it out using regular CSS because IE doesn’t support pseudo classes like :first-child etc.

So I tried jQuery and got some success using:

$("#breadcrumb li:last > a").addClass("last");

But I can’t figure out how to target those in between, because if I style all #breadcrumb li > a with class “middle”, then using .addClass doesn’t work anymore.

Any suggestions?

Answer 1

You can use :not() with :first and :last, like this:

$("#breadcrumb li:first > a").addClass("first");
$("#breadcrumb li:not(:first,:last) > a").addClass("middle");
$("#breadcrumb li:last > a").addClass("last");