<ol>
    <li>li</li>
    <li>li</li>
    <li>li</li>
    <li>li</li>
</ol>
li:last-child {
    background-color: yellowgreen;
}
실제 적용된 모습
:last-child {
    /* ... */
}
<article>
    <h2>제목 요소</h2>
    <p>문단 요소 1</p>
    <p>문단 요소 2</p>
</article>
article p:last-child {
    background-color: yellowgreen;
}
실제 적용된 모습
<article>
    <div>이 `div`는 첫 번째입니다.</div>
    <div>이 <span>중첩된 `span`은 첫 번째이면서 마지막입니다.</span>!</div>
    <div>
        이 <em>중첩된 `em`은 첫 번째입니다.</em>, 하지만 <em>중첩된 이 `em`은 마지막입니다.</em>!
    </div>
    <div>이 <span>중첩된 `span`은 첫 번째이면서 마지막입니다.</span>!</div>
    <p>이 `p`는 첫 번째가 아닙니다.</p>
    <div>이 `div`는 마지막입니다.</div>
</article>
article *:last-child {
    background-color: yellowgreen;
}
실제 적용된 모습

마지막 업데이트 정보: 2023-10-30

:last-child 가상 클래스의 브라우저 호한성
선택자
Chrome
Chrome
Edge
Edge
Firefox
Firefox
Safari
Safari
:last-child 1 12 1 3.1
부모 요소가 없는 요소와 일치 57 79 52 지원하지 않음

caniuse.com에서 더 자세한 정보를 확인해 보세요.