CSS :nth-last-of-type() 페이크 클래스

정의와 사용법

CSS :nth-last-of-type(n) 페이크 클래스는 부모 요소에서의 특정 타입의 마지막 n 요소의 각 요소.

n 수자/인덱스, 키워드（홀수 또는 짝수） 또는 공식（예 an + b）일 수 있습니다.

ヒント：보기 :nth-last-child() 페이크 클래스는 부모 요소에서의 마지막 n 요소가 있으며, 그 타입은 무엇이든 될 수 있습니다.

예제

예제 1

그의 부모 요소의 마지막 두 번째 <p> 요소로부터의 <p> 요소에 배경색을 지정합니다.

그리고, 그의 부모 요소의 마지막 세 번째 <li> 요소로부터의 <li> 요소에 배경색을 지정합니다:

p:nth-last-of-type(2) {
  background: red;
}
li:nth-last-of-type(3) {
background: yellow;
}

직접 시도해 보세요

예제 2

홀수 또는 짝수 키워드로 사용할 수 있으며, 홀수 또는 짝수 인덱스를 가진 자식 요소를 매칭할 수 있습니다（첫 번째 자식 요소의 인덱스는 1입니다）.

여기서, 홀수 인덱스와 짝수 인덱스를 가진 <p> 요소의 배경색을 다르게 지정합니다:

p:nth-last-of-type(odd) {
  background: red;
}
p:nth-last-of-type(even) {
  background: blue;
}

직접 시도해 보세요

예제 3

정리 공식（an + b）를 사용하여 설명합니다. a는 정수 단계, n은 0에서 시작하는 모든 비음수 정수, b는 정수 이동량입니다.

여기서, 3의 배수인 인덱스를 가진 모든 <p>와 <li> 요소의 배경색을 지정합니다:

p:nth-last-of-type(3n) {
  background: red;
}
li:nth-last-of-type(3n) {
  background: yellow;
}

직접 시도해 보세요

CSS 문법

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

기술 세부 사항

브라우저 지원

표格에 나타난 숫자는 이 페이크 클래스를 최초로 지원하는 브라우저 버전을 나타냅니다.