How do I change the CSS for the element BEFORE the last?

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?

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");

I propose a change in thinking about the problem:

• Style all a elements
• Override the style for :first-child
• Override the style for :last

To expand on some of the answers here, you basically have two concerns:

1. You want to style something that's not first nor last
2. You want this to work in IE.

Therefore I recommend a two step approach:

First, set your HTML+CSS accordingly

<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>

#breadcrumb li a { /* middle rules here */ }
#breadcrumb li:first-child a { /* first child rules here */ }
#breadcrumb li:last-child a { /* last child rules here */ }

Second, to fix for IE,

<div id="breadcrumb">
  <ul>
     <li class="first-child"><a href="#">Home</a></li>
     <li><a href="#">Sports</a></li>
     <li><a href="#">Football</a></li>
     <li class="last-child"><a href="#">Leagues/a></li>
  </ul>
</div>

#breadcrumb li a { /* middle rules here */ }
#breadcrumb li:first-child a { /* first child rules here */ }
#breadcrumb li:last-child a { /* last child rules here */ }

/* IE part */
#breadcrumb li.first-child a { /* first child rules here */ }
#breadcrumb li.last-child a { /* last child rules here */ }

If you can't add the first-child and last-child classes on the server (or statically) I'd use this jQuery JS:

$('#breadcrumb li:first-child').addClass('first-child');
$('#breadcrumb li:last-child').addClass('last-child');

Finally, I'd use conditional comments or some kind of feature detection (not sure what feature detection would work) to ensure that only browsers who need the fix get the first/last fix. You could create a div that's off-screen and see if first/last rules work on it.

Note that the jQuery code could be adapted easily if you use first-child/last-child a lot, you can add those classes all over your DOM in two lines.

Edit I tested my solution and found that IE8 can't parse the CSS rules if you have the :last-child in a comma-separated rule list so unfortunately you have to duplicate the rules for IE. However, this makes it easier to delete that part of the code base once you no longer care about supporting IE8 (sigh... one day).