[css] CSS 마지막 자식 (-1)

Program / 글쓴이

목록의 마지막 하위를 선택할 수있는 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는 역동적 인 방법을 제공하지 않는 것 같습니다. 자바 스크립트로 대체 할 수는 있지만 간과 한 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");
});

답변