jQuery에서 선택자에 사용되는 :first-child 와 :first의 차이

jQuery에서 선택자로 자주 사용되는 것 중 :first-child와 :first의 차이를 알아보자. 우선 아래의 화면을 먼저 보자.

 

샘플을 위해 국내 모 커뮤니티의 메인 페이지에 있는 게시물 목록을 가져와봤는데 브라우저에 보여지는 모습은 위와 같고 그에 대한 HTML 코드는 아래와 같다. 

<div class="board_new">
	<h2 style="font-size:12px;padding:0 0 1px 5px;"><img src="/cs2/img/icon_n.gif" alt="n"> <a href="/cs2/bbs/board.php?bo_table=news">새로운 소식</a></h2>
	<ul>
	    <li><span class="date">09/10</span> <span class="title"><a href="./cs2/bbs/board.php?bo_table=news&amp;wr_id=1680802">방수방진폰 ‘갤럭시S4 액티브’, SKT 단독 출시…10월 시판</a></span><span class="read">[36]</span></li>
	    <li><span class="date">09/10</span> <span class="title"><a href="./cs2/bbs/board.php?bo_table=news&amp;wr_id=1680727">애플 지문인식센서, 아이폰 5S에만</a></span><span class="read">[69]</span></li>
	    <li><span class="date">09/10</span> <span class="title"><a href="./cs2/bbs/board.php?bo_table=news&amp;wr_id=1680718">야후, 新모바일 동영상 앱 '야후 스크린' 공개</a></span><span class="read">[1]</span></li>
	    <li><span class="date">09/10</span> <span class="title"><a href="./cs2/bbs/board.php?bo_table=news&amp;wr_id=1680679">칼 아이칸, “델 인수 포기”</a></span><span class="read">[9]</span></li>
	    <li><span class="date">09/10</span> <span class="title"><a href="./cs2/bbs/board.php?bo_table=news&amp;wr_id=1680672">삼성, 8개 두뇌 모두 쓰는 '옥타코어' 개발</a></span><span class="read">[39]</span></li>
	    <li><span class="date">09/10</span> <span class="title"><a href="./cs2/bbs/board.php?bo_table=news&amp;wr_id=1680625">소니, 미러리스 카메라 ‘알파 A3000’ 출시</a></span><span class="read">[29]</span></li>
	</ul>
</div>

화면에서 보면 새로운 소식 코너는 <모두 6개의 <li> 요소를 후손으로 갖는 <div> 요소로 구성되어 있다. 그리고 6개의 각 소식은 다시 3개의 <span> 태그로 구성되어 포스팅된 날짜와 게시물 타이틀, 그리고 댓글수로 나누어져 있다. 

:first-child 를 사용한 결과

// :first-child 선택자의 결과는? (두 코드는 동일한 결과를 보여줌)

$('.board_new span').filter(':first-child');
$('.board_new span:first-child');

위의 선택자를 통해 가져오게 되는 것은 다음과 같이 6개의 각 소식의 포스팅된 날짜이다. 

​09/10​​
​09/10​​ 
​09/10​​ 
​09/10​​ 
​09/10​​ 
​09/10​​

즉, 3개의 <span> 요소로 구성된 각 소식의 첫번째 <span> 태그의 집합인 것이다. 

// 선택자를 통해 가져온 요소의 색깔을 빨간색으로 바꿔보자.
$('.board_new span').filter(':first-child').css('color','red');

이렇게 :first-child로 가져온 요소의 글자 색깔을 빨간색으로 바꿔보면 실제 이 선택자를 통해 가져오게 되는 요소가 무엇인지 명확히 구분할 수 있다. 짐짓 선택자의 이름만 봐서는   <span> 요소의 첫번째 것만 가져올 것 같지만 실제로 이 선택자가 가지는 의미는 그렇지 않다는 것을 구분해야 한다.  

:first를 사용한 결과

:first-child의 결과와 비교해볼 때 :first 선택자는 상대적으로 매우 단순한다. 선택자를 통해 가져온 결과셋 (흔히 matched set 또는 result set이라고 한다)에서 무조건 첫번째 요소를 가져온다. 우리가 보통 일반적으로 생각하는 결과를 보여주는 선택자이다. 

// 선택자를 통해 가져온 요소의 색깔을 빨간색으로 바꿔보자.
$('.board_new span').filter(':first').css('color','red');

위의 선택자를 통한 코드 실행으로 보여지는 결과는 다음과 같다. 

위와 같이 변경된 화면을 보면 첫번째 <span> 태그만 선택된 것을 알 수 있다. 

두 선택자의 차이

위의 결과를 비교해보면 :first와 :first-child 선택자 모두 특정한 위치에 있는 요소를 선택하는 역할을 하지만 여기서의 선택기준 위치는 :first의 경우 결과셋을 기준으로 한 위치(Position among matched elements)를 의미하고 :first-child는 부모(parent)와 형제(sibling)간의 관계에 기반한 위치(Position among siblings)를 의미한다고 볼 수 있다. 

같은 논리로 :last-child와 :last를 이해할 수 있다.