jQuery의 :first-child 선택자

:first-child 선택자는 해당 요소의 첫 번째 자식 요소를 선택하는데 사용됩니다. 이 선택자를 사용하면 웹 페이지에서 첫 번째 자식 요소를 쉽게 선택하여 조작할 수 있습니다. 여러 예제를 통해 이 선택자의 활용법을 알아보겠습니다.

예제 1: 리스트에서 첫 번째 항목 스타일링하기

<ul>
  <li>첫 번째 항목</li>
  <li>두 번째 항목</li>
  <li>세 번째 항목</li>
</ul>

$("li:first-child").addClass("first-item");

이 예제는 리스트에서 첫 번째 항목을 선택하여 "first-item" 클래스를 추가합니다.

예제 2: 테이블에서 첫 번째 행 스타일링하기

<table>
  <tr><td>데이터 1</td></tr>
  <tr><td>데이터 2</td></tr>
  <tr><td>데이터 3</td></tr>
</table>

$("tr:first-child").addClass("first-row");

이 예제는 테이블에서 첫 번째 행을 선택하여 "first-row" 클래스를 추가합니다.

예제 3: 그룹에서 첫 번째 요소 스타일링하기

<div class="group">
  <div>요소 1</div>
  <div>요소 2</div>
  <div>요소 3</div>
</div>

$(".group div:first-child").addClass("first-element");

이 예제는 그룹에서 첫 번째 요소를 선택하여 "first-element" 클래스를 추가합니다.

:first-child 선택자를 사용하면 요소의 첫 번째 자식을 선택하여 스타일이나 동작을 조작할 수 있습니다.