CSS의 :nth-last-child(n) 선택자를 사용하면 부모 요소의 자식들 중에서 마지막 자식부터 거꾸로 세어 해당 위치에 있는 모든 <p> 요소를 간편하게 스타일링할 수 있습니다. 아래 예제 코드를 직접 실행하며 동작 방식을 확인해 보세요.
:nth-last-child(n) 선택자란?
:nth-last-child(n)는 CSS의 구조적 가상 클래스(Structural Pseudo-class) 중 하나로, 형제 요소들 사이에서 끝에서 n번째에 위치하는 요소를 선택합니다. 일반적인 :nth-child(n)가 앞에서부터 순서를 계산하는 것과 달리, 이 선택자는 뒤에서부터 개수를 세기 때문에 목록의 마지막 항목이나 특정 위치의 요소를 정확히 지정할 때 유용합니다.
예제
<!DOCTYPE html>
<html>
<head>
<style>
p:nth-last-child(4) {
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>
<p>This is demo text 6.</p>
</body>
</html>실행 결과
위 코드를 실행하면 총 6개의 <p> 요소 중 뒤에서 네 번째에 해당하는 "This is demo text 3." 문단에 파란색 배경과 흰색 글자가 적용됩니다.
다양한 활용 방법
p:nth-last-child(odd)— 뒤에서부터 홀수 번째 요소 선택p:nth-last-child(even)— 뒤에서부터 짝수 번째 요소 선택p:nth-last-child(3n)— 뒤에서부터 3의 배수 번째 요소 선택p:nth-last-child(-n+3)— 마지막 3개의 요소 선택
이처럼 :nth-last-child(n) 선택자는 수식(an+b)과 함께 사용할 수 있어, 리스트나 테이블 등 반복되는 요소에서 뒤쪽 항목들을 유연하게 제어할 수 있습니다.