jQuery의 :first-of-type 선택자

:first-of-type 선택자는 해당 요소의 형제 중에서 첫 번째로 등장하는 동일한 유형의 요소를 선택하는 데 사용됩니다. 예를 들어, div 요소 중에서 첫 번째로 등장하는 div 요소를 선택할 수 있습니다. 이 선택자를 사용하면 특정 유형의 요소 중에서 첫 번째로 등장하는 요소를 쉽게 선택하여 조작할 수 있습니다. 여러 예제를 통해 이 선택자의 활용법을 알아보겠습니다.

예제 1: div 요소 중에서 첫 번째로 등장하는 요소 스타일링하기

<div>첫 번째로 등장하는 div 요소</div>
<div>두 번째로 등장하는 div 요소</div>
<p>다른 유형의 요소</p>
<div>세 번째로 등장하는 div 요소</div>

$("div:first-of-type").addClass("first-div");

이 예제는 div 요소 중에서 첫 번째로 등장하는 요소를 선택하여 "first-div" 클래스를 추가합니다.

예제 2: 각 섹션의 첫 번째로 등장하는 h2 요소 스타일링하기

<section>
  <h2>첫 번째 섹션의 제목</h2>
  <p>섹션의 내용</p>
</section>
<section>
  <h2>두 번째 섹션의 제목</h2>
  <p>섹션의 내용</p>
</section>

$("section h2:first-of-type").addClass("section-title");

이 예제는 각 섹션에서 첫 번째로 등장하는 h2 요소를 선택하여 "section-title" 클래스를 추가합니다.

예제 3: ul 요소의 첫 번째로 등장하는 li 요소 스타일링하기

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

$("ul li:first-of-type").addClass("first-item");

이 예제는 각 ul 요소에서 첫 번째로 등장하는 li 요소를 선택하여 "first-item" 클래스를 추가합니다.

:first-of-type 선택자를 사용하면 형제 중에서 특정 유형의 요소 중에서 첫 번째로 등장하는 요소를 선택할 수 있습니다.