tags:

views:

3787

answers:

3

Title says it all.

+5  A: 

You could use the last-child pseudo-class on the li element to achieve this

<html>
<head>
<style type="text/css">
ul li:last-child
{
font-weight:bold
}
</style>
</head>
<body>
<ul>
<li>IE</li>
<li>Firefox</li>
<li>Safari</li>
</ul>
</body>
</html>

There is also a first-child pseudo class available.

I am not sure the last-child element works in IE though.

Tim C
*smacks head* Thanks, man - I had forgotten about the CSS pseudoclasses.
A: 

Does jquery come bundled with drupal, if so you could use $('ul>li:last').addClass('last') to achieve this

redsquare
That'll work too.
A: 

Alternatively, you could achieve this via JavaScript if certain browsers don't support the last-child class. For example, this script sets the class name for the last 'li' element in all 'ul' tags, although it could easily be adapted for other tags, or specific elements.

function highlightLastLI()
{
    var liList, ulTag, liTag;
    var ulList = document.getElementsByTagName("ul");
    for (var i = 0; i < ulList.length; i++)
    {
        ulTag = ulList[i];
        liList = ulTag.getElementsByTagName("li");
        liTag = liList[liList.length - 1];
        liTag.className = "lastchild";
    }
}
Tim C
eeek if ever there was a case for using jquery or similar - 12 lines into 1!!
redsquare