[HTML/CSS] 형제 요소 중 첫번째 요소 선택하기 (:first-child)

 

지난번에는 ':last-child' 선택자를 이용하여

형제 요소 중 마지막 요소를 선택하는 방법을 알아보았습니다.

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

 

 

:first-child

CSS에서 ':first-child' 선택자를 이용하여

형제 요소 중 첫번째 요소를 선택할 수 있습니다.

 

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

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

.my:first-child

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

이 중 가장 첫 번째 div를 선택하기 위해서

먼저 my클래스를 선택하고, :first-child 선택자를 사용하여,

이 중 첫번째 div 요소를 선택하였습니다.

 

선택된 첫번째 div 요소만 배경색이 하늘색으로 변경된 것을 확인할 수 있습니다.