CSS :nth-last-child() pseudo 클래스

정의와 사용법

CSS :nth-last-child(n) pseudo 클래스는 부모 요소의 마지막 n번째 자식 요소로서의 각 요소를 매칭합니다. 요소의 유형은 무관합니다.

n 는 숫자/인덱스, 키워드(홀수 또는 짝수）또는 정리식(예: an + b）：

ヒント：보기 :nth-last-of-type() pseudo 클래스는 부모 요소에서 지정된 유형의 마지막 n번째 자식 요소를 선택합니다. n 자식 요소의 요소.

예제

예제 1

모든 부모 요소의 마지막 두 번째 자식 요소로서의 <p> 요소에 배경색을 지정합니다:

p:nth-last-child(2) {
  background-color: red;
}

직접 테스트해 보세요

예제 2

홀수 와 짝수 는 키워드로 사용할 수 있으며, 홀수 또는 짝수 인덱스의 자식 요소를 매칭할 수 있습니다.

여기서, 홀수와 짝수 인덱스의 마지막 <p> 요소에 다른 배경색을 지정합니다:

p:nth-last-child(odd) {
  background-color: red;
}
p:nth-last-child(even) {
  background-color: blue;
}

직접 테스트해 보세요

예제 3

정리식(an + b）：설명：a 는 정수 단계를 나타내며, n은 0에서 시작하는 모든 비정수 정수입니다,b 는 정수 오프셋입니다.

여기서, 3의 배수인 마지막 인덱스의 모든 <p> 요소에 배경색을 지정합니다:

p:nth-last-child(3n+0) {
  background-color: red;
}

직접 테스트해 보세요

CSS 문법

:nth-last-child(index | 홀수 | 짝수 | an+b) {
  css 선언;
}

기술 세부 사항

브라우저 지원

표에서의 숫자는 이伪클래스를 최초로 지원하는 브라우저 버전을 지정합니다.