CSS의 :nth-last-of-type(n) 선택자는 마지막 자식 요소부터 역순으로 계산했을 때, 부모 요소 안에서 두 번째 <p> 요소에 해당하는 모든 <p> 요소를 선택할 때 사용합니다.
:nth-last-of-type(n) 선택자란?
이 선택자는 같은 타입(여기서는 <p> 태그)의 형제 요소들 중에서 끝에서부터 n번째 위치한 요소를 찾아 스타일을 적용합니다. 예를 들어, 문단이 5개 있을 경우 끝에서 두 번째인 네 번째 문단이 선택됩니다.
예제
아래 코드를 실행하면 :nth-last-of-type(n) 선택자의 동작 방식을 직접 확인할 수 있습니다.
<!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>실행 결과
위 코드를 실행하면 다섯 개의 문단 중 'This is demo text 4.'라는 네 번째 문단에 파란색 배경과 흰색 글자가 적용됩니다. 이는 해당 문단이 끝에서부터 두 번째 <p> 요소이기 때문입니다.
정리
:nth-last-of-type(n)은 요소의 순서를 앞에서부터가 아닌 뒤에서부터 계산해야 하는 경우에 유용하게 사용되는 CSS 구조적 의사 클래스(pseudo-class)입니다. 목록의 마지막 항목 근처에 있는 특정 요소만 스타일링하고 싶을 때 특히 효과적입니다.