CODEWITHSUNDEEP
csshtml-lists
Stephen Watkins
Stephen Watkins

Reputation: 25765

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:

<ul>
    <li>Page 1</li>
    <li>Page 2</li>
    <li>
        Page 3
        <ul>
            <li>Subpage 1</li>
            <li>Subpage 2</li> <!-- Can I target ONLY this element? -->
        </ul>
    </li>
</ul>

Note that this list is dynamic. The number of items and number of levels are not predictable. So, something like this wouldn't be flexible enough:

/* I know this does not have great browser support - just an example */
ul > li > ul > li:last-child {
    /* CSS here */
}

I realize that I could modify my server code to add a class to the last item, but I would first like to know if this is possible in CSS.

To make matters more complicated, I would like to target all major browsers along with IE 7+.

Is it possible to target the very last list item using CSS?

Basically, I need this Fiddle solved (via @Pumbaa80).

Upvotes: 7

Views: 11255

Answers (5)

Bj&#248;rn van Dommelen
Bj&#248;rn van Dommelen

Reputation: 1097

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/

Upvotes: 1

Sampson
Sampson

Reputation: 268344

The CSS3 Way (IE9+)

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

li:last-child li: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.

Upvotes: 6

user123444555621
user123444555621

Reputation: 152986

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

Upvotes: 1

Andrea Turri
Andrea Turri

Reputation: 6500

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:

ul ul li: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');​

Upvotes: 5

SoEnLion
SoEnLion

Reputation: 183

You can use li:last-child in your CSS

Upvotes: 0

Related Questions