CSS last-child (-1)

Я ищу css-селектор, который позволяет мне выбрать дочерний список до последнего.

<ul>
     <li>1</li>
     <li>2</li>
     <li>3</li>
     <li>4</li>
     <li>5</li> <!-- select the pre last item dynamically no matter how long this list is -->
     <li>6</li>
</ul>

Статический метод:

ul li:nth-child(5)

Динамический метод:

ul li:last-child(-1)

который, конечно же, не проверяется, также nth-last-child, кажется, не обеспечивает динамический способ. Я могу откинуться на javascript, но мне интересно, есть ли способ css, который я пропускал

Ответ 1

Вы можете использовать :nth-last-child(); на самом деле, кроме :nth-last-of-type() Я не знаю, что еще вы могли бы использовать. Я не уверен, что вы подразумеваете под "динамикой", но если вы имеете в виду, относится ли стиль к новому второму последнему ребенку, когда в список добавлено больше детей, да, так оно и будет. Интерактивная скрипта.

ul li:nth-last-child(2)

Ответ 2

Если вы не можете заставить PHP наклеить этот элемент классом, вам лучше использовать jQuery.

jQuery(document).ready(function () {
  $count =  jQuery("ul li").size() - 1;
  alert($count);
  jQuery("ul li:nth-child("+$count+")").css("color","red");
});