Is It Possible To Target The Very Last List Element In Css?

I have a page menu being generated that will be similar in structure to the following nested list:

• Page 1
• Page 2
&l

Solution 1:

The CSS3 Way (IE9+)

If you know exactly how deep your last item is, you can repeat your calls to :last-child:

li:last-childli:last-child {
    color: red;
}

This pseudo-class selector isn't supported in IE prior to version 9, according to http://caniuse.com/#search=last-child. Of course, if you don't know how deep this list item will be, then this method isn't really helpful.

The JavaScript Way

You can target the very last list item via JavaScript as well:

var items = document.getElementById("mylist").getElementsByTagName("li"),
    _item = items[ items.length - 1 ];

_item.className == "" 
  ? _item.className = "last" 
  : _item.className += " last" ;

This is raw JavaScript, which requires no additional frameworks or libraries. If you're using a popular framework like jQuery, this could be even simpler:

$("#mylist li:last").addClass("last");

I wouldn't suggest you use jQuery just for something like this. Raw JavaScript would be far faster, and far less bloat.

The Preprocessor way

Depending on how your navigational menu is constructed, you may be able to use a server-side language to identify the last list-item, and mark it as such. For example, we could perform the following using the DOMDocument class in PHP:

$d = new DOMDocument();
$d->loadHTML( $html );
    
$a = $d->getElementsByTagName("li");
$l = $a->item( $a->length - 1 );

$c = $l->getAttribute("class");

empty( $c ) 
  ? $l->setAttribute("class", "last") 
  : $l->setAttribute("class", "last $c");

echo$d->saveHTML( $l );

This finds the last list item in the HTML and adds a new class of "last" to it. The benefit to this is that it doesn't require complicated, and often times poorly-supported, CSS3 selectors. Further, it doesn't require the addition of large JavaScript libraries to do trivial things.

Solution 2:

You posted the correct way:

li:last-child

If you need to be sure you can use javascript / jQuery to do it. But then you could have the problem: "if people have js disabled?"... no way.

Use li:last-child.

---

Edit:

If you can add atleast a class on the UL will be easy. Otherwise if you are sure to have only two list:

ululli:last-child { /* code */ }

---

Another Edit:

http://jsfiddle.net/toroncino/4NXg2/

Double solution, js and css.

---

Edit again:

Your Fiddle: http://jsfiddle.net/toroncino/NaJas/1/

$('ul').last().addClass('last');​

Solution 3:

It is not possible. Your constraint

The number of items and number of levels are not predictable.

means that CSS2 selectors, and even CSS3 selectors are not sufficient:

Suppose you have a selector that works for list depth 2. Now adding a third list level in that item would have to invalidate that selector, i.e. the selector would have to depend on the element's child elements. Selectors like that don't exist yet and will be introduced in CSS4, where this would be a solution to your problem:

/* CSS4 */li:last-child:not($li li) {
    /**/
}

The selector $li li means "an li that has some li descendant".

Solution 4:

In short : no. The constraints you're giving make CSS solutions impractical due to the (very) poor support for 'advanced css' in IE7.

Would the use of javascript be an option in your case? With jquery the following comes to mind:

$('ul li').last().css('color', 'red');

edit: This will also bypass your 'unknown tree depth' issue as child nodes of the last li would automatically be further down in the list of matching items but child nodes of earlier li items would not :

• 1st element
• 2nd element
• 3rd element
  • 4th element
• 5th element

edit: i've updated your fiddle here http://jsfiddle.net/NaJas/4/

Solution 5:

You can use li:last-child in your CSS