선택자_가상 클래스2

아래의 코드가 html 파일에 작성됐다고 가정한다.

 

<div class="fruits">
    <span>딸기</span>
    <span>수박</span>
    <div>오렌지</div>
    <p>망고</p>
    <h3>사과</h3>
  </div>

 

 

1. first-child

 

ABC:first-child 형태로 작성한다.

선택자 ABC가 형제 요소 중 첫째라면 선택한다.

.fruits span:first-child 라고 작성하면 span 요소 중 첫째인 '딸기'를 선택한다.

.fruits 클래스를 가진 선택자와 그 하위 선택자인 span의 조건을 충족하는 요소 중 '딸기'가 조건에 부합한다.

 

.fruits div:first-child 라고 작성하면 아무것도 선택하지 못한다.

fruits 클래스를 가진 div태그의 형제들 중 하위 선택자div는 첫째가 아니고, 때문에 첫째를 선택하는 first-child는 작동하지 않는다.

 

이때 처음 공부하면 오해할 수 있는게, .fruits 클래스의 하위 요소 div 중 첫번째 요소를 고르는 거 아니냐고 생각할 수 있다. 이런 문제를 해결하는 좋은 방법은 CSS 선택자를 뒤에서부터 해석하는 거다.

앞부터 해석하면 상술한대로 오해할 수 있지만 뒤부터 해석하면 직관적으로 first-child를 선택한다고, 조건은 .fruits 클래스의 하위 선택자인 div 요소여야 한다고 알 수 있다.

 

 

 

2. last-child

 

ABC:last-child 형태로 작성한다.

선택자 ABC가 형제 요소 중 막내라면 선택한다.

위의 first-child와 마찬가지로 막내 요소가 ABC가 아니라면 선택하지 않는다.