Different CSS class for Last list_item

Hi

While its specific to specific page ID # and not generic to the last item in the list, if your list of pages is static you can do it this way.

wp_list_pages assigns classes to every list item it generates, like this:

<li class=”page_item page-item-55″>

page_item is generic, page-item-55 is specific.

55 is the post id of that item. So if your last page is ID#55, you can add css like this:

li.page-item-55 { [put CSS stuff for last page here] }

if you change the last page to a different last page at some point, you will have to change your CSS.

Use the browser’s View Source to find the class assigned to your last li item.

I actually wanted a dynamic way to do this, where pages can be added without having to change the CSS and I figured out a way to do it.

I wanted a | separator between my li links and I used the :first-child pseudo class in my CSS in order to keep a | from showing up after the last list-item. Works like a charm!

CSS3 offers the following solution:

li:last-child {
  ? declarations
}

Unfortunately Opera 9.5 is the only browser that has full support on this pseudo class. IE doesn’t support it at all, Firefox 1.0, 1.5 & 2.0 does but is buggy. Don’t know if 3.0 has full support. Safari 1.3, 2.0 & 3.0 also have buggy support.

But hey you can try it. The worst thing that could happen is that people will actually see you styled your last list element differently.

I think you might run into problems with :first-child in IE6.

I know an extra separator at the beginning of your Page lists isn’t that big a deal, but if you want a cross-browser solution then you can use Page Lists Plus to dynamically add a class of “first_item” to the first item in your Page lists.

– Tim

Isn’t it sad that we still have to be considerate of an 8 year old browser like IE6? Unfortunately 23% of the visitors on the websites I run still use IE6. I even had some hits from IE4.0 last week!!

If you put the :first-child and :last-child at the bottom of your external stylesheet it won’t give you any problems in IE6. If it stops rendering at those lines doesn’t doesn’t matter because there’s nothing after it.