CSS :last-child 선택자로 부모의 마지막 요소에 스타일 지정하는 방법

CSS :last-child 선택자란?

CSS에서 :last-child 선택자를 사용하면 부모 요소의 마지막 자식으로 존재하는 모든 요소를 손쉽게 선택하고 스타일을 지정할 수 있습니다. 이 선택자는 목록이나 문단의 마지막 항목만 다르게 강조하고 싶을 때 특히 유용합니다.

참고로 예제 코드에는 :last-of-type 선택자가 사용되었습니다. 두 선택자는 비슷하지만 약간의 차이가 있습니다.

:last-child — 부모의 마지막 자식이면서 해당 요소일 때만 선택됩니다.
:last-of-type — 부모 내에서 같은 타입(태그) 중 마지막에 위치한 요소를 선택합니다. 뒤에 다른 태그가 있어도 선택됩니다.

예제 코드

아래 코드를 실행하면 세 개의 문단 중 마지막 요소에만 주황색 배경이 적용됩니다.

<!DOCTYPE html>
<html>
   <head>
      <style>
         p:last-of-type {
            background: orange;
         }
      </style>
   </head>
   <body>
      <h2>Heading</h2>
      <p>This is demo text1.</p>
      <p>This is demo text2.</p>
      <p>This is demo text3.</p>
   </body>
</html>

실행 결과

위 코드를 브라우저에서 실행하면 "This is demo text3." 문단에만 주황색 배경이 표시됩니다. 앞의 두 문단은 스타일이 적용되지 않고 그대로 유지됩니다.

:last-child를 사용한 경우

만약 p:last-child를 사용했다면, 요소가 부모(<body>)의 정확히 마지막 자식일 때만 스타일이 적용됩니다. 위 예제에서는 가 실제로 마지막 자식이므로 동일한 결과를 얻을 수 있습니다. 하지만 마지막에 다른 태그(예: <div>)가 추가되면 :last-child는 더 이상 작동하지 않으므로 상황에 맞는 선택자를 사용하는 것이 중요합니다.