By: Patrick

Patrick — Thu, 25 Jun 2009 17:42:41 +0000

Steve, I need to dig some more, because I’m getting two different behaviors from this code in IE7 on two sites where I use this trick. Your idea looks like it’d work fine, so that might be the bulletproof trick for IE7 & IE6.

By: Steve Stedman

Steve Stedman — Thu, 25 Jun 2009 17:29:04 +0000

Nice! Too bad that darn IE always spoils the party (FWIW, Firefox adds :nth-* in v3.5 http://hacks.mozilla.org/2009/06/css3-nth/).

Would IE play nice if you apply a “lastRow” class to the last li elements and then style the “li.lastRow span” selector?

// goal: add classes to the last row of list items so that we can use CSS  to remove the bottom border
$(function(){
  // add the 'lastRow' class to the last
  $('#authors li:last').addClass('lastRow')
    // then check to see if the previous  has the 'even' class already present
    // before adding a lastRow class to it
    .prev().filter('.even').addClass('lastRow');
});

And then the CSS looks like:

#authors li.lastRow span {
    border-bottom: none;
}

Comments on: Using jQuery to mimic CSS3's :nth-last-child

By: Patrick

By: Steve Stedman