CSS :last-child 선택자 완벽 정리 – 마지막 자식 요소 스타일링 방법

CSS :last-child 선택자란?

CSS의 :last-child 선택자는 부모 요소 안에서 마지막 자식으로 위치한 요소를 찾아 스타일을 적용하는 의사 클래스(pseudo-class)입니다. 예를 들어, 여러 개의 <p> 태그 중 부모의 마지막 자식에 해당하는 <p> 요소만 선택하여 배경색이나 글자 스타일을 다르게 지정할 수 있습니다.

:last-child 기본 사용법

아래 예제는 p:last-child를 사용해 부모(여기서는 <body>)의 마지막 자식인 <p> 요소에 주황색 배경을 적용합니다. 앞의 두 문단에는 스타일이 적용되지 않고, 세 번째 문단에만 배경색이 표시됩니다.

<!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."에만 주황색 배경이 적용됩니다.

함께 알아두면 좋은 관련 선택자

:first-child – 부모의 첫 번째 자식 요소를 선택합니다.
:nth-child(n) – 부모의 n번째 자식 요소를 선택합니다.
:last-of-type – 같은 태그 유형 중 마지막 요소를 선택합니다.

:last-child 선택자는 목록의 마지막 항목 구분선 제거, 카드 레이아웃의 마지막 여백 조정 등 실무에서 자주 활용되므로 꼭 익혀두는 것이 좋습니다.