[Selector] JQ - :first-of-type 가상선택자 - 타입 고려 첫번째 자식요소 선택. (= :first-of-type선택자 = 퍼스트오브타입 선택자)

1. :first-of-type 예제 - 그 부모의 타입 고려 첫번째 P자식요소
2. :first-of-type 정의
3. :first-of-type 구문
4. :first-of-type 예제 - 각 div의 타입 고려 첫번째 P자식요소
5. :first-of-type 예제 - cf. :first, :first-child

:first-of-type 예제 - 그 부모의 타입 고려 첫번째 P자식요소

 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<script>

$(document).ready(function(){

  $("p:first-of-type").css("background-color", "yellow");

});

</script>

<p>홈짱닷컴 Homzzang.com</p>

<div style="border:1px solid;">

  <p>HTML</p>

  <p>구조</p>

</div><br>

<div style="border:1px solid;">

  <span>CSS</span>

  <p>디자인</p>

  <p>구조 보충</p>

</div>

<p>홈페이지 제작관리 강의</p>

 

결과보기

:first-of-type 정의

 

그 부모의 모든 첫 번째 지정 유형 요소를 선택.

 

---

 

1.

다른 유형 요소가 해당 유형보다 먼저 위치 해도, 무방함.

오직, 같은 유형의 요소 중에서 가장 먼저 오기만 하면 됨. (위 예제 참고.)

 

2.

다른 선택자와 함께 사용되어, 해당 선택자의 첫 번째 요소 가리킴.

 

3. cf. 함수.

:nth-of-type(1) 선택자와 동일 의미.

:last-of-type 선택자는 그 부모의 모든 마지막 지정 유형 요소 의미.

 

:first-of-type 구문

 

$("selector:first-of-type")

 

※ selector: 타 선택자

:first-of-type 예제 - 각 div의 타입 고려 첫번째 P자식요소

 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<script>

$(document).ready(function(){

  $("div p:first-of-type").css("background-color", "yellow");

});

</script>

<p>홈짱닷컴 Homzzang.com</p>

<div style="border:1px solid;">

  <p>HTML</p>

  <p>구조</p>

</div><br>

<div style="border:1px solid;">

  <span>CSS</span>

  <p>디자인</p>

  <p>구조 보충</p>

</div>

<p>홈페이지 제작관리 강의</p>

 

결과보기

:first-of-type 예제 - cf. :first, :first-child

 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<script>

$(document).ready(function(){

  $("button").click(function(){

    var btn = $(this).text();

    $("p").css("background-color", "white"); 

    $("p" + btn).css("background-color", "yellow"); 

  });

});

</script>

<button>:first</button>

<button>:first-child</button>

<button>:first-of-type</button><br><br>

<p>홈짱닷컴 Homzzang.com</p>

<div style="border:1px solid;">

  <p>HTML.</p>

  <p>구조</p>

</div><br>

<div style="border:1px solid;">

  <span>CSS</span>

  <p>디자인</p>

  <p>구조 보충</p>

  <span>인라인스타일, 내부스타일, 외부스타일</span>

</div><br>

<div style="border:1px solid">

  <p>JS</p>

  <p>동적 기능</p>

</div>

<p>홈페이지 제작관리 강의.</p>

 

결과보기