CSS :last-child 선택자가 예상대로 작동하지 않는 이유와 해결 방법

:last-child 선택자란?

:last-child 선택자는 부모 요소의 마지막 자식 요소를 선택하는 데 사용됩니다. 하지만 중요한 제약이 하나 있습니다. 이 선택자는 특정 클래스를 가진 마지막 자식 요소를 선택하는 용도로는 사용할 수 없습니다.

기본 사용 예시

예를 들어, 목록에서 마지막 li 요소에 배경색을 지정하려면 다음과 같이 작성합니다.

li:last-child {
    background-color: blue;
}

:last-child가 작동하지 않는 경우

그런데 여기서 문제가 발생합니다. 대상 요소가 부모의 실제 마지막 요소가 아니라면 :last-child는 전혀 적용되지 않습니다. 이 선택자는 "같은 타입 중 마지막"이 아니라 "부모의 진짜 마지막 자식"만을 인식하기 때문입니다.

<a> 태그 예시를 통해 살펴보겠습니다. 선택자가 a:last-child일 때 아래 코드는 정상적으로 작동합니다.

<div>
    <a></a>
    <a>이 요소가 선택됩니다</a>
</div>

위 구조에서 두 번째 <a> 요소는 div의 마지막 자식이므로 스타일이 의도한 대로 적용됩니다.

해결 방법: :last-of-type 활용

만약 마지막 <a> 요소 뒤에 <p>나 <span> 같은 다른 요소가 추가되면 a:last-child는 더 이상 일치하지 않습니다. 이런 경우에는 :last-of-type 선택자를 사용하는 것이 좋습니다.

a:last-of-type {
    background-color: blue;
}

a:last-of-type은 형제 요소 중 같은 타입(<a>)의 마지막 요소를 선택하므로, 뒤에 다른 태그가 있어도 원하는 결과를 얻을 수 있습니다. 또한 특정 클래스를 가진 마지막 요소를 찾아야 한다면 순수 CSS만으로는 불가능하므로, JavaScript를 활용하거나 HTML 구조 자체를 조정하는 것이 현실적인 해결책입니다.