How do I add a “last” class on the last <li> within a Views-generated list?

StackOverflow https://stackoverflow.com/questions/113702

  •  02-07-2019
  •  | 
  •  

Question

How do I add a "last" class on the last <li> within a Views-generated list?

Was it helpful?

Solution

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.

OTHER TIPS

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

You can use that pesudo-class last-child, first-child for first or nth-child for any number of child

li:last-child{
    color:red;
    font-weight:bold;
}

Does jquery come bundled with drupal, if so you could use 

$('ul>li:last').addClass('last');

to achieve this

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top