CODEWITHSUNDEEP
htmlcsscss-selectorshtml-lists
individualtermite
individualtermite

Reputation: 3755

Changing CSS for last <li>

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.

Upvotes: 80

Views: 199280

Answers (10)

mikemaccana
mikemaccana

Reputation: 123208

2015 Answer: CSS last-of-type allows you to style the last item.

ul li:last-of-type { color: red; }

Upvotes: 5

Keith Adler
Keith Adler

Reputation: 21178

You could use jQuery and do it as such way

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

Upvotes: 10

pano
pano

Reputation: 659

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

Upvotes: 65

Lucas Jones
Lucas Jones

Reputation: 20193

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

Upvotes: 108

jaeson
jaeson

Reputation: 21

$('li').last().addClass('someClass');

if you have multiple

  • group it will only select the last li.

    Upvotes: 2

    • Lawrence
    Lawrence

    Reputation: 447

    :last-child is CSS3 and has no IE support while :first-child is CSS2, I believe the following is the safe way to implement it using jquery

    $('li').last().addClass('someClass');

    Upvotes: 2

    c_harm
    c_harm

    Reputation:

    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{ /* ... */ }

    Upvotes: 12

    DisgruntledGoat
    DisgruntledGoat

    Reputation: 72530

    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.

    Upvotes: 7

    vise
    vise

    Reputation: 13383

    I usually do this by creating a htc file (ex. last-child.htc):

    <attach event="ondocumentready" handler="initializeBehaviours" />
<script type="text/javascript">
function initializeBehaviours() {
  this.lastChild.className += ' last-child';
}
</script>

    And call it from my IE conditional css file with:

    ul { behavior: url("/javascripts/htc/last-child.htc"); }

    Whereas in my main css file I got:

    ul li:last-child,
ul li.last-child {
  /* some code */
}

    Another solution (albeit slower) that uses your existent css markup without defining any .last-child class would be Dean Edwards ie7.js library.

    Upvotes: 3

    strager
    strager

    Reputation: 90022

    If you know there are three li's in the list you're looking at, for example, you could do this:

    li + li + li { /* Selects third to last li */
}

    In IE6 you can use expressions:

    li {
    color: expression(this.previousSibling ? 'red' : 'green'); /* 'green' if last child */
}

    I would recommend using a specialized class or Javascript (not IE6 expressions), though, until the :last-child selector gets better support.

    Upvotes: 0

    Related Questions