CSS의 :nth-last-of-type(n) 선택자는 같은 유형의 형제 요소 중에서 뒤에서부터 세어 n번째에 해당하는 요소를 선택할 때 사용합니다. 예를 들어 p:nth-last-of-type(2)를 적용하면, 부모 요소 안의 모든 <p> 태그 중 마지막에서 두 번째 <p> 요소만 선택됩니다.
:nth-last-of-type(n) 선택자의 동작 원리
이 선택자는 요소의 위치를 문서 끝(마지막 자식)에서부터 거꾸로 계산한다는 점이 일반적인 :nth-of-type() 선택자와 다릅니다. 따라서 목록이나 게시글처럼 항상 마지막 부분의 특정 요소만 스타일링해야 할 때 매우 유용합니다.
예제
다음 코드를 실행하면 :nth-last-of-type(n) 선택자가 실제로 어떻게 작동하는지 확인할 수 있습니다. 다섯 개의 문단 중 뒤에서 두 번째 문단인 "This is demo text 4."에 파란색 배경과 흰색 글자색이 적용됩니다.
<!DOCTYPE html>
<html>
<head>
<style>
p:nth-last-of-type(2) {
background: blue;
color: white;
}
</style>
</head>
<body>
<p>This is demo text 1.</p>
<p>This is demo text 2.</p>
<p>This is demo text 3.</p>
<p>This is demo text 4.</p>
<p>This is demo text 5.</p>
</body>
</html>참고 사항
:nth-last-of-type() 선택자에는 숫자뿐만 아니라 odd(홀수), even(짝수), 또는 3n+1 같은 수식(an+b)도 사용할 수 있습니다. 모든 최신 브라우저에서 지원되므로 호환성 걱정 없이 활용할 수 있습니다.