CSS 에서 자주 사용되는... 많이 활용되는 선택자 중 하나로 last-child 선택자를 들 수 있습니다. first-child와 함께 말이죠~ 마지막 요소에만 특정 스타일을 지정할 경우 last-child 선택자를 사용할 수 있습니다. 예를들어 만약 p 태그가 나열된 태그들 중 마지막에 해당하는 p태그에 스타일을 부여하려면? 아래와 같이 사용가능합니다.

p:last-child { 스타일 속성과 값; }

#1 마지막 요소 선택자 예제보기


아래 예제를 봐주세요. 아래는 6개의 동일한 p 엘리먼트(요소) 중에서 마지막 요소만 배경색으로 붉은 색을 적용하였습니다. 다른 태그들은 적용되지 않고 오직 p태그에만 적용됩니다.


<html>
<head>
<style type="text/css">
.test {background:#f80; color: #fff; margin: 4px; width: 30px; height: 30px; display: inline-block; text-align: center; }
.test:last-child { background: #f00; }
</style>
</head>

<body>
<div>
<p class="test">1</p>
<p class="test">2</p>
<p class="test">3</p>
<p class="test">4</p>
<p class="test">5</p>
<p class="test">6</p>
</div>
</body>
</html>



1

2

3

4

5

6


*구현시 실제 화면에 나타나는 모습입니다.


#2 last-child 사용시 주의할 점은 무엇일까요? !!


; 만약 지정한 스타일 지정이 안된다면 해당하는 p태그 이외의 태그가 존재하지는 않나 살펴보세요. 다른 태그가 중간에 존재하는 경우 삭제하거나 해당하는 p태그 상위에 예제처럼 div태그를 사용해서 묶어주는 것이 좋은 습관입니다.


#3 참고사항 !!
last-chilld 선택자는 *(별표) 기호 뒤에도 사용할 수 있습니다. 그래서 만약 * 기호 뒤에 이 선택자를 사용하면 해당하는 태그의 모든 마지막 요소들에게 스타일이 적용됩니다.