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) 

확인하지 않습니다 물론, 이는 또한 n 번째 - 마지막으로 아이가하지 않는 것 동적 방법을 제공합니다 .. 내가 자바 스크립트로 대체 할 수 있지만 내가 간과하는 CSS 방식이 있는지 궁금합니다

Answer 1

너 수:nth-last-child(); 실제로 :nth-last-of-type() 외에도 다른 용도로 사용할 수 있을지 모르겠습니다. 나는 당신이 "역동적 인"것에 의해 당신이 무엇을 의미하는지 모르겠다. 그러나 더 많은 아이들이리스트에 추가 될 때 그 스타일이 새로운 두 번째 마지막 아이에게 적용되는지 여부를 의미한다면, 그렇다. 당신이 클래스와 해당 요소에 레이블을 PHP를 얻을 수 있습니다하지 않는 한 Interactive fiddle.

ul li:nth-last-child(2) 

Answer 2

당신은 jQuery를 사용하는 것이 더 낫다.

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