CSS last-child (-1)

Question

Я ищу селектор 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, который я пропустил

Answer 1

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

ul li:nth-last-child(2)

Answer 2

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

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