정의 및 사용 방법

:nth-last-of-type(n) 가상 클래스 선택자는
특정 유형(태그 이름)의 형제 요소들 중에서만 기준으로 순서가 뒤에서 n 번째에 위치하는 요소들을 선택합니다.

특정 유형이란 태그 이름의 유형입니다.

예를 들어, p:nth-last-of-type(2)는 같은 부모의 <p> 요소들만 세어서 순서를 마지막(last) 뒤에서부터 계산해 두 번째 <p> 요소를 선택합니다.

기본 예제

HTML 
<section>
    <p>'p' 태그 유형 중 뒤에서 세 번째 요소</p>
    <div>'div' 태그 유형 중 뒤에서 세 번째 요소</div>
    <p>'p' 태그 유형 중 뒤에서 두 번째 요소</p>
    <p>'p' 태그 유형 중 뒤에서 첫 번째 요소</p>
    <div>'div' 태그 유형 중 뒤에서 두 번째 요소</div>
    <div>'div' 태그 유형 중 뒤에서 첫 번째 요소</div>
</section>
CSS 
/* <section>의 <p> 태그 유형의 자식 요소들 중에서
 * <p> 태그 유형을 기준으로
 * 뒤에서 세 번째에 위치하는 요소
*/
section p:nth-last-of-type(3) {
    background-color: yellowgreen;
}

/* <section>의 <div> 태그 유형의 자식 요소들 중에서
 * <div> 태그 유형을 기준으로
 * 뒤에서 첫 번째에 위치하는 요소
*/
section div:nth-last-of-type(1) {
    background-color: orange;
}
실제 적용된 모습

구문

CSS 
/* 양의 정수: n 번째 */
li:nth-last-of-type(1) /* 같은 부모의 <li> 요소들만 세어 뒤에서 첫 번째 <li> 요소 선택 */ 
li:nth-last-of-type(7)  /* 같은 부모의 <li> 요소들만 세어 뒤에서 일곱 번째 <li> 요소 선택 */ 

/* 키워드: even / odd */
li:nth-last-of-type(odd) /* 같은 부모의 <li> 요소들만 세어 뒤에서 홀수(1, 3, 5,...) 번째 <li> 요소 선택 */
li:nth-last-of-type(even) /* 같은 부모의 <li> 요소들만 세어 뒤에서 짝수(2, 4, 6,...) 번째 <li> 요소 선택 */ 

/* 수식: An+B */
li:nth-last-of-type(2n) /* 같은 부모의 <li> 요소들만 세어 뒤에서 2의 배수 번째 <li> 요소 선택 */ 
li:nth-last-of-type(3n) /* 같은 부모의 <li> 요소들만 세어 뒤에서 3의 배수 번째 <li> 요소 선택 */  

li:nth-last-of-type(3n+1) /* 같은 부모의 <li> 요소들만 세어 뒤에서 3의 배수에 1일 더한 번째 <li> 요소 선택 */ 
li:nth-last-of-type(3n-1) /* 같은 부모의 <li> 요소들만 세어 뒤에서 3의 배수에 1일 뺀 번째 <li> 요소 선택 */

형식 구문

CSS 
:nth-last-of-type(n) {
    /* ... */
}

:nth-last-of-type(n) 가상 클래스의 n을 하나의 매개변수로 사용해 지정합니다.

매개변수 n의 값

선택하려는 요소의 매개변수입니다. 매개변수 n은 세 가지 방법으로 값을 지정할 수 있습니다.

  1. 음이 아닌 정수 인덱스 값
  2. 키워드 값(odd 또는 even)
  3. An+B 형태의 사용자 지정 패턴

음이 아닌 정수 인덱스 값

특정 유형(태그 이름)의 형제 요소들 중에서 그 유형을 기준으로 뒤부터 음이 아닌 정수로 인덱스를 매겨 그 순서에 맞는 요소를 선택합니다. 인덱스는 1부터 시작합니다.

HTML 
<section>
    <p>'p' 태그 유형 중 뒤에서 두 번째 p</p>
    <div>'div' 태그 유형 중 뒤에서 첫 번째 div</div>
    <p>'p' 태그 유형 중 뒤에서 첫 번째 p</p>
</section>
CSS 
section p:nth-last-of-type(1) {
    background-color: yellowgreen;
}
실제 적용된 모습

키워드 값(odd 또는 even)

:nth-last-of-type(n) 가상 클래스의 키워드 값 설명
odd 특정 유형(태그 이름)의 형제 요소들 중에서 그 유형을 기준으로 뒤부터 시작해 홀수 번째(1, 3, 5, 7, ...)에 위치하는 요소들을 선택합니다.
even 특정 유형(태그 이름)의 형제 요소들 중에서 그 유형을 기준으로 뒤부터 시작해 짝수 번째(2, 4, 6, 8, ...)에 위치하는 요소들을 선택합니다.
HTML 
<section>
    <p>'p' 태그 유형 중 뒤에서 세 번째 요소</p>
    <div>'div' 태그 유형 중 뒤에서 세 번째 요소</div>
    <p>'p' 태그 유형 중 뒤에서 두 번째 요소</p>
    <p>'p' 태그 유형 중 뒤에서 첫 번째 요소</p>
    <div>'div' 태그 유형 중 뒤에서 두 번째 요소</div>
    <div>'div' 태그 유형 중 뒤에서 첫 번째 요소</div>
</section>
CSS 
div:nth-last-of-type(even) {
    background-color: yellowgreen;
}
p:nth-last-of-type(odd) {
    background-color: orange;
}
실제 적용된 모습

An+B 형태의 사용자 지정 패턴

An+B 형태의 사용자 지정 패턴을 만족한 인덱스를 가지는 요소들을 선택합니다.

  • A는 정수 인덱스 증감 단계,
  • B는 정수 오프셋으로 생략 가능하며,
  • n은 0부터 시작하는 모든 양의 정수를 나타냅니다.

이는 목록의 뒤부터 An+B 번째 요소로 읽을 수 있습니다.

CSS 
:nth-last-of-type(5n)
/*
 * 0 [=5×0], 5 [=5×1], 10 [=5×2], 15 [=5×3], 뒤부터 ... 번째의 요소를 나타냅니다. 
 * 요소의 인텍스는 1부터 시작하기 때문에 0 번째의 요소는 없으므로, 5, 10, 15, ... 번째의 요소를 나타냅니다. 
 * 결론적으로 5n은 뒤부터 5의 배수 번째 요소들을 선택합니다.
*/

:nth-last-of-type(5n-1)
/*
 * -1 [=5×0-1], 4 [=5×1-1], 9 [=5×2-1], 14 [=5×3-1], 뒤부터 ... 번째의 요소를 나타냅니다. 
 * 요소의 인텍스는 1부터 시작하기 때문에 -1 번째의 요소는 없으므로, 뒤부터 4, 9, 14, ... 번째의 요소를 나타냅니다. 
 * 결론적으로 5n은 뒤부터 5의 배수 번째에서 하나 앞의 요소들을 선택합니다.
*/

:nth-last-of-type(5n+1)
/*
 * 1 [=5×0+1], 6 [=5×1+1], 11 [=5×2+1], 16 [=5×3+1], 뒤부터 ... 번째의 요소를 나타냅니다. 
 * 뒤부터 1, 6, 11, 16, ... 번째의 요소를 나타냅니다. 
 * 결론적으로 5n은 뒤부터 5의 배수 번째에서 하나 뒤의 요소들을 선택합니다.
*/

:nth-last-of-type(n)
/*
 * 0 [0], 1 [1], 2 [2], 3 [×3], 뒤부터 ... 번째의 요소를 나타냅니다.
 * 요소의 인텍스는 1부터 시작하기 때문에 0 번째의 요소는 없으므로, 뒤부터 1, 2, 3, ... 번째의 요소를 나타냅니다.
 * 결론적으로 n은 같은 유형의 모든 요소를 나타냅니다.
*/

다음은 :nth-last-of-type(An+B) 선택자를 활용한 요소 선택을 패턴화해서 스타일한 예제입니다.

HTML 
<ol>
    <li>li</li>
    <li>li</li>
    <li>li</li>
    <li>li</li>
    <li>li</li>
    <li>li</li>
    <li>li</li>
    <li>li</li>
    <li>li</li>
    <li>li</li>
    <li>li</li>
    <li>li</li>
    <li>li</li>
    <li>li</li>
    <li>li</li>
</ol>
CSS 
ol {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
    gap: 10px;
}
ol li {
    aspect-ratio: 1/0.5;
    border: 1px solid red;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 7px;
}
ol li:nth-last-of-type(5n-1) { /* 뒤부터 계산하여 5의 배수 번째에서 하나 앞의 요소들을 선택 */
    background-color: yellowgreen;
}
CSS aspect-ratio 속성
실제 적용된 모습

이 예제를 보면 알 수 있듯이 :nth-last-of-type(n) 가상 클래스 선택자에 An+B 형태의 사용자 지정 패턴을 활용하면 요소 선택을 패턴화하기 쉽습니다.

주의할 점

:nth-last-of-type(n) 가상 클래스 선택자는
특정 유형(태그 이름)의 형제 요소들 중에서 그 유형을 기준으로 뒤부터 계산하여 n 번째에 위치하는 요소들을 선택합니다.

특정 유형이란 태그 이름의 유형입니다.

다음의 예제로 살펴보겠습니다.

HTML 
<style>
    .red-item:nth-last-of-type(2) {
        color: red;
        font-weight: bold;
    }
</style>
<ol>
    <li class="red-item">매칭될 요소로 기대하지만 아님</li>
    <li>li</li>
    <li class="red-item">li</li>
</ol>
<!--
    * 혹시 .red-item 유형 중에서 뒤부터 계산하여 두 번째를 선택했나요?
    * 그렇다면 잘못된 선택입니다.
    *
    *
    * .red-item:nth-last-of-type(2)는 두 부분으로 나뉩니다.
    * => .red-item: 클래스 속성의 값이 'red-item'인 요소의 태그 이름은 <li>입니다.
    * => 특정 유형은 태그 이름 유형을 의미합니다.
    * => <li> 요소가 특정 유형이 됩니다.
    * => 태그 유형이 <li>의 뒤부터 계산하여 두 번째 요소가 'red-item'라는 클래스 속성의 값이 있어야 선택됩니다.
    * => 따라서, 위 요소 중에서는 매칭되는 요소가 없습니다.
-->
실제 적용된 모습 .red-item:last-of-type(2) 선택자로 매칭되는 요소가 없습니다.

특정 유형이 '태그 이름'이라는 것을 모른다면 :nth-last-of-type(n) 가상 클래스 선택자가 제대로 작동하지 않는 것처럼 보일 수 있으니 주의해야 합니다!

브라우저 호환성

:nth-last-of-type() 가상 클래스의 브라우저 호환성
선택자
데스크탑 Chrome
Chrome
데스크탑데스크탑 Edge
Edge
데스크탑 Firefox
Firefox
Safari
Safari
:nth-last-of-type() 4 12 3.5 3.1

명세서

:nth-last-of-type() 가상 클래스의 명세서 사양
명세서 사양
:nth-last-of-type() Selectors Level 4
#nth-last-of-type-pseudo

참고문헌

같이 보기