Comment puis-je ajouter un & # 8220; dernier & # 8221; classe sur le dernier < li > dans une liste générée par Views?

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

  •  02-07-2019
  •  | 
  •  

Question

Comment puis-je ajouter un " dernier " classe sur le dernier < li > de la liste générée par Vues?

Était-ce utile?

La solution

Vous pouvez utiliser la pseudo-classe last-child de l'élément li pour y parvenir

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

Une pseudo-classe de premier enfant est également disponible.

Je ne suis pas sûr que l'élément last-child fonctionne dans IE, cependant.

Autres conseils

Vous pouvez également utiliser JavaScript si certains navigateurs ne prennent pas en charge la classe last-child. Par exemple, ce script définit le nom de classe du dernier élément 'li' dans toutes les balises 'ul', bien qu'il puisse facilement être adapté à d'autres balises ou à des éléments spécifiques. 

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

Vous pouvez utiliser cette pseudo-classe dernier enfant , premier enfant pour le premier ou nième enfant pour un nombre quelconque d'enfants 

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

Est-ce que jquery est fourni avec drupal, si vous pouvez utiliser 

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

pour y parvenir

Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow
scroll top