Changing CSS for last <li>

Question

I am wondering if there is some way to change a CSS attribute for the last li in a list using CSS. I have looked into using :last-child, but this seems really buggy and I can't get it to work for me. I will use JavaScript to do this if necessary, but I want to know if anyone can think up a solution in CSS.

Solution 1

:last-child is really the only way to do it without modifying the HTML - but assuming you can do that, the main option is just to give it a class="last-item", then do:

li.last-item { /* ... */ }

Obviously, you can automate this in the dynamic page generation language of your choice. Also, there is a lastChild JavaScript property in the W3C DOM.

Here's an example of doing what you want in Prototype:

$$("ul").each(function(x) { $(x.lastChild).addClassName("last-item"); });

Or even more simply:

$$("ul li:last-child").each(function(x) { x.addClassName("last-item"); });

In jQuery, you can write it even more compactly:

$("ul li:last-child").addClass("last-item");

Also note that this should work without using the actual last-child CSS selector - rather, a JavaScript implementation of it is used - so it should be less buggy and more reliable across browsers.

Solution 2

I've done this with pure CSS (probably because I come from the future - 3 years later than everyone else :P )

Supposing we have a list:

<ul id="nav">
  <li><span>Category 1</span></li>
  <li><span>Category 2</span></li>
  <li><span>Category 3</span></li>
</ul>

Then we can easily make the text of the last item red with:

ul#nav li:last-child span {
   color: Red;
}

Solution 3

I usually combine CSS and JavaScript approaches, so that it works without JavaScript in all browsers but IE6/7, and in IE6/7 with JavaScript on (but not off), since they does not support the :last-child pseudo-class.

$("li:last-child").addClass("last-child");

li:last-child,li.last-child{ /* ... */ }

Solution 4

You could use jQuery and do it as such way

$("li:last-child").addClass("someClass");

Solution 5

One alternative for IE7+ and other browsers may be to use :first-child instead, and invert your styles.

For example, if you're setting the margin on each li:

ul li {
  margin-bottom: 1em;
}
ul li:last-child {
  margin-bottom: 0;
}

You could replace it with this:

ul li {
  margin-top: 1em;
}
ul li:first-child {
  margin-top: 0;
}

This will work well for some other cases like borders.

According to sitepoint, :first-child buggy, but only to the extent that it will select some root elements (the doctype or html), and may not change styles if other elements are inserted.

View more solutions

Comments

[strager]

I'm curious: why do you need this?

[PF1]

Hi strager: I am making a navigation bar and want the properties of the last element to be different then the rest of them.

[Keith Adler]

Nice that you incorporated my answer into yours after I posted it.

[Lucas Jones]

Sorry - I was in the middle of posting the JQuery equivalent of the Prototype code I had already posted. If you would like, I can edit the JQuery part out.

[Lucas Jones]

Sorry again for misunderstanding :). Technically, your code is 10x better - it actually works! (Typo will be fixed in 10..9..)

[vise]

Just a minor correction, :last-child doesn't work on IE7 as well.

[BoltClock]

jQuery does let the browser handle the selection if it understands :last-child though.

[ᴍᴀᴛᴛ ʙᴀᴋᴇʀ]

By far the cleanest solution (if supported obviously).

[Clain Dsilva]

The selector does the trick "ul#nav li:last-child span" works and "#nav li:last-child span" does not. While technically both points to the same element , the first one is more specific. Salutes to the "man from future"

[Stefan Haberl]

+1 for the "man from the future" ;) - although strictly speaking, two years down you're a man from the past :P

[zak]

but because he wrote it 2 years ago doesn't mean he's not from the future, rather a man from the future with a past :)