CSS change for last <li>

Question

I am wondering if there is a way to change the CSS attribute for the last li in the list using CSS. I studied using :last-child , but that seems really a mistake, and I can't get it to work for me. I will use JavaScript for this if necessary, but I want to know if anyone can come up with a solution in CSS.

Answer 1

:last-child is really the only way to do this without changing the HTML, but if you do, the main option is to give it class="last-item" and then do:

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

Obviously, you can automate this in a dynamic page generation language of your choice. In addition, the W3C DOM has a JavaScript lastChild property.

Here is an example of what you want to do in Prototype :

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

Or even simpler:

 $$("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, its JavaScript implementation is used, so it should be less buggy and more reliable in browsers.

Answer 2

I did it with pure CSS (perhaps because I come from the future - 3 years later than everyone else: P)

Suppose 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 element red with:

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

Answer 3

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

 $("li:last-child").addClass("last-child"); li:last-child,li.last-child{ /* ... */ } 

Answer 4

You can use jQuery and do it as such

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

Answer 5

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

For example, if you set a margin on each li :

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

You can replace it with the following:

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

This will work well for some other cases, such as borders.

According to sitepoint,: :first-child error, but only if it selects some root elements (doctype or html) and cannot change styles if other elements are inserted.

Answer 6

I usually do this by creating an htc file (e.g. 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 using

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

While in my main css file I got:

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

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

Answer 7

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

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

Answer 8

: last-child is CSS3 and does not have IE support while: first-child is CSS2, I believe the next way is a safe way to implement it using jquery

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

Answer 9

.

$ ('whether') in the past () addClass ('SomeClass') ;.

if you have several groups

he will choose only the last li.

Answer 10

If you know that there are three li in the list you are looking at, you can 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 custom class or Javascript (rather than IE6 expressions), although the :last-child selector gets better support.