[HTML/CSS] 형제 요소중 마지막 요소 선택하기 (:last-child)

 

:last-child

CSS의 :last-child 선택자를 이용하여

형제 요소중 마지막 요소를 선택할 수 있습니다.

 

<div class='my'>첫번째</div>
<div class='my'>두번째</div>
<div class='my'>마지막</div>

.my {
  background-color: yellow;
}
.my:last-child {
  background-color: skyblue;
}

 

위 예제는 'my' 라는 클래스명을 가지는 3개의 형제 div 요소가 있습니다.

이 3개의 형제 요소 중, 마지막 div 요소를 선택하는 예제입니다.

 

'my'라는 클래스를 가지는 div 영역은 배경색이 모두 노란색입니다.

이중, 마지막 div 영역만 하늘색으로 표시하기 위해서,

.my:last-child 선택자를 사용하여, 배경색을 하늘색으로 지정하였습니다.