부모 요소의 마지막 자식에 해당하는 모든 <p> 요소에 스타일을 적용하려면 CSS의 :last-child 선택자를 사용하면 됩니다.
:last-child 선택자란?
:last-child 선택자는 특정 요소가 같은 부모를 가진 형제 요소 중 가장 마지막에 위치할 때만 매칭됩니다. 즉, 문서 내의 모든 <p> 태그가 아니라 각 부모 요소의 마지막 자식으로 존재하는 <p> 태그에만 스타일이 적용됩니다.
아래 예제 코드를 직접 실행해 보면 :last-child 선택자가 어떻게 동작하는지 쉽게 이해할 수 있습니다.
예제
<!DOCTYPE html>
<html>
<head>
<style>
p:last-child {
background: orange;
}
</style>
</head>
<body>
<p>This is demo text1.</p>
<p>This is demo text2.</p>
<p>This is demo text3.</p>
</body>
</html>실행 결과
위 코드를 브라우저에서 실행하면 세 개의 문단 중 마지막 문단인 "This is demo text3."에만 주황색(orange) 배경이 적용됩니다.
앞의 두 문단은 부모 요소(<body>)의 마지막 자식이 아니기 때문에 p:last-child 규칙의 대상에서 제외됩니다. 이처럼 :last-child 선택자를 활용하면 별도의 클래스나 ID를 추가하지 않고도 목록이나 문단의 마지막 항목에 손쉽게 고유한 스타일을 지정할 수 있습니다.