[css] n 번째 자식으로 마지막 n 개의 항목을 선택할 수 있습니까?

Program / 글쓴이

표준 목록을 사용하여 마지막 두 목록 항목을 선택하려고합니다. 나는 다양한 순열을 가지고 An+B있지만 마지막 2를 선택하는 것은 없습니다.

li:nth-child(n+2) {} /* selects from the second onwards */
li:nth-child(n-2) {} /* selects everything */
li:nth-child(-n+2) {} /* selects first two only */
li:nth-child(-n-2) {} /* selects nothing */

나는 새로운 CSS3 선택자를 알고 :nth-last-child()있지만 가능한 경우 더 많은 브라우저에서 작동하는 것을 선호합니다 (IE에 대해서는 신경 쓰지 마십시오).

답변

목록의 마지막 두 개의 iem이 선택됩니다.

li:nth-last-child(-n+2) {color:red;}
<ul>
  <li>fred</li>
  <li>fred</li>
  <li>fred</li>
  <li>fred</li>
  <li>fred</li>
  <li>fred</li>
  <li>fred</li>
  <li>fred</li>
  <li>fred</li>
  <li>fred</li>
</ul>

스 니펫 확장

답변

nth-last-child이 문제를 해결하기 위해 특별히 설계된 것처럼 들리므로 더 호환 가능한 대안이 있는지 의심합니다. 그래도 지원은 꽤 괜찮아 보입니다 .

답변

:nth-last-child(-n+2) 트릭을해야합니다

답변

의 의미론의 정의로 인해 nth-child관련된 요소 목록의 길이를 포함하지 않고 이것이 어떻게 가능한지 알 수 없습니다. 의미의 요점은 여러 하위 요소를 반복 그룹으로 편집 하거나 ( 편집 -BoltClock 덕분에) 고정 길이의 첫 부분으로, 나머지는 “나머지”로 분리하는 것입니다. 당신은 그 반대를 원합니다 nth-last-child. 그것이 당신에게주는 것입니다.

답변

프로젝트에서 jQuery를 사용하거나 포함 nth-last-child시키려는 경우 선택기 API를 통해 호출 할 수 있습니다 (이것은 브라우저를 통해 시뮬레이션 됨). 여기 링크입니다 에 nth-last-child플러그인. 관심있는 요소를 타겟팅하는이 방법을 사용한 경우 :

$('ul li:nth-last-child(1)').addClass('last');

그런 다음 의사 또는 선택기 last대신 클래스를 다시 스타일링 하면 훨씬 일관된 크로스 브라우저 환경을 경험할 수 있습니다.nth-childnth-last-child

답변