li:nth-last-child(-n+4) //would select the last four list items in a list.

To style the 2nd-to-last list item only, this example would work:

li:nth-last-child(-n+2)

The situation I had was there is a list of authors for a site. More than wp_list_authors, it was a custom-generated list of certain users. The list is styled to look like a box with two columns. There are dividers between each author both horizontally and vertically, with the bottom two authors having no bottom divider.

This list:

<ul id="authors">

<li class="even"><a class="authorImg">
<img src="avatar.jpg" alt="" height="30px" /></a>
<a class="authorName">John Doe</a></li>

<li class="odd"><a class="authorImg">
<img src="avatar.jpg" alt="" height="30px" /></a>
<a class="authorName">Hap Pill</a></li>

...(snip)...

<li class="odd"><a class="authorImg">
<img src="avatar.jpg" alt="" height="30px" /></a>
<a class="authorName">John Hancock</a></li>

<li class="even"><a class="authorImg">
<img src="avatar.jpg" alt="" height="30px" /></a>
<a class="authorName">Lorem Ipsum</a></li>

<li class="odd"><a class="authorImg">
<img src="avatar.jpg" alt="" height="30px" /></a>
<a class="authorName">Jane Doe</a></li>

</ul>

… needs to look like this:

<ul id="authors">
<li class="even"><a class="authorImg" href="#"><img src="http://slash25.com/wp/wp-content/uploads/2009/06/avatar.jpg" alt="" height="30px" /></a><a class="authorName" href="#">John Doe</a></li>
<li class="odd"><a class="authorImg" href="#"><img src="http://slash25.com/wp/wp-content/uploads/2009/06/avatar.jpg" alt="" height="30px" /></a><a class="authorName" href="#">Hap Pill</a></li>
<li class="even"><a class="authorImg" href="#"><img src="http://slash25.com/wp/wp-content/uploads/2009/06/avatar.jpg" alt="" height="30px" /></a><a class="authorName" href="#">Foo Bar</a></li>
<li class="odd"><a class="authorImg" href="#"><img src="http://slash25.com/wp/wp-content/uploads/2009/06/avatar.jpg" alt="" height="30px" /></a><a class="authorName" href="#">Ima Doody</a></li>
<li class="even"><a class="authorImg" href="#"><img src="http://slash25.com/wp/wp-content/uploads/2009/06/avatar.jpg" alt="" height="30px" /></a><a class="authorName" href="#">Chew Bacca</a></li>
<li class="odd"><a class="authorImg" href="#"><img src="http://slash25.com/wp/wp-content/uploads/2009/06/avatar.jpg" alt="" height="30px" /></a><a class="authorName" href="#">John Hancock</a></li>
<li class="even"><a class="authorImg" href="#"><img src="http://slash25.com/wp/wp-content/uploads/2009/06/avatar.jpg" alt="" height="30px" /></a><a class="authorName" href="#">Lorem Ipsum</a></li>
<li class="odd"><a class="authorImg" href="#"><img src="http://slash25.com/wp/wp-content/uploads/2009/06/avatar.jpg" alt="" height="30px" /></a><a class="authorName" href="#">Jane Doe</a></li>
</ul>

Removing the border on the last list item’s span is easy. Use the :last-child pseudo-selector and the border’s gone.

#authors li.odd:last-child span {
border-bottom: none;
}

Removing the border on the 2nd-to-last one should be this easy:

#authors li:nth-last-child(-n+2) span {
border-bottom: none;
}

But for now, that only works in Safari 4. (and maybe Opera?) so how to get that effect in Safari 3 and Firefox 3? (I have not gotten this to work in IE7 or 6. Those are coming.) Use jQuery and a three-line script.

Here’s what I cobbled together from digging through the jQuery documentation:

//removes bottom border from next-to-last span in the authors listings
var $curr = $('#authors li:last');
$curr = $curr.prev().children('span');
$curr.css('border-bottom','none');

The script first locates the last list item. Then it looks for the previous element of that type, then drills down to the children elements that are spans. In this case, there’s only one. Lastly, the script applies a CSS rule of no border to the span.

Is it perfect? Almost. I’ll need to figure out how to get IE7 and, unfortunately for this job, IE6 to render the next-to-last item correctly.