All geek questions in one place

How to add the last class to the last <li> in the list generated by Views?

How to add the last class to the last <li> in the list generated by Views?

+4
source share
4 answers

You can use the last-child pseudo-class for 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 pseudo-class with a first child.

I'm not sure if the last-child element works in IE.

+9
source

Alternatively, you can achieve this using JavaScript if certain browsers do not support the last child class. For example, this script sets the class name for the last "li" element in all "ul" tags, although it can be easily 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"; } }
+2
source

Is jquery included with drupal if you can use

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

to achieve this

0
source

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

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

Source: https://habr.com/ru/post/1277007/

More articles:


All Articles