CSS :last-of-type 선택자란?
CSS의 :last-of-type 선택자는 부모 요소 안에서 동일한 타입의 형제 요소 중 마지막에 위치한 요소만 골라 스타일을 적용합니다. 예를 들어 이 선택자를 <p> 요소에 사용하면, 부모 요소 내부에 있는 여러 문단 중 마지막 문단에만 원하는 스타일이 지정됩니다.
:last-child 선택자와 혼동하기 쉽지만 두 선택자에는 차이가 있습니다. :last-child는 부모의 마지막 자식이어야만 선택되는 반면, :last-of-type은 같은 태그 유형 중 마지막이기만 하면 되므로 그 뒤에 다른 종류의 요소가 있어도 선택됩니다.
예제
다음 코드를 실행하면 :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-of-type 선택자를 활용하면 목록이나 게시글 목록처럼 반복되는 요소 중 마지막 항목만 별도로 강조하고 싶을 때 매우 유용합니다.