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

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

ul li:nth-last-child(2)

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

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