CSS :nth-last-child(n) 선택자란?
CSS의 :nth-last-child(n) 선택자는 부모 요소의 자식 중에서 뒤에서부터 n번째에 해당하는 요소를 선택하여 스타일을 적용할 수 있는 강력한 도구입니다. 일반적인 :nth-child(n)가 앞에서부터 순서를 세는 것과 달리, 이 선택자는 마지막 자식부터 역순으로 계산한다는 점이 핵심 차이입니다.
예를 들어, 목록의 마지막 몇 개 항목만 강조하거나, 뒤에서 특정 위치에 있는 요소에 다른 디자인을 적용하고 싶을 때 매우 유용하게 사용됩니다.
:nth-last-child(n) 사용 예제
아래 코드는 <p> 요소들 중에서 뒤에서 네 번째(4번째)에 해당하는 요소를 선택해 배경색과 글자색을 변경하는 예제입니다.
<!DOCTYPE html>
<html>
<head>
<style>
p:nth-last-child(4) {
background: blue;
color: white;
}
</style>
</head>
<body>
<p>데모 텍스트 1입니다.</p>
<p>데모 텍스트 2입니다.</p>
<p>데모 텍스트 3입니다.</p>
<p>데모 텍스트 4입니다.</p>
<p>데모 텍스트 5입니다.</p>
<p>데모 텍스트 6입니다.</p>
</body>
</html>실행 결과
위 코드를 실행하면 총 6개의 문단 중 뒤에서 4번째인 '데모 텍스트 3'에 파란 배경과 흰색 글자가 적용되는 것을 확인할 수 있습니다. 나머지 문단은 기본 스타일 그대로 유지됩니다.
활용 팁
:nth-last-child(1)은 마지막 자식 요소를 의미하며,:last-child와 동일하게 작동합니다.:nth-last-child(odd),:nth-last-child(even)처럼 홀수·짝수 패턴도 사용할 수 있습니다.:nth-last-child(3n)형태로 수열 공식을 활용하면 반복 패턴의 스타일링도 간편하게 처리할 수 있습니다.
테이블 행 강조, 리스트 마지막 항목 처리, 카드 레이아웃 정렬 등 다양한 상황에서 :nth-last-child(n) 선택자를 활용해 보세요.