[Selector] JQ - :last-of-type 가상선택자 - 타입 고려 마지막 자식요소 선택. (= 라스트 어브 타입 선택자)

1. :last-of-type 예제 - 그 부모의 타입 고려 마지막 자식p요소.
2. :last-of-type 정의
3. :last-of-type 구문
4. :last-of-type 예제 - div의 타입 고려 마지막 자식p요소.
5. :last-of-type 예제 - cf. :last, :last-child

:last-of-type 예제 - 그 부모의 타입 고려 마지막 자식p요소.

 

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

<script>

$(document).ready(function(){

  $("p:last-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;">

  <p>CSS</p>

  <p>디자인</p>

  <span>구조 보충</span>

</div>

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

 

결과보기

:last-of-type 정의

 

그 부모의 타입 고려 마지막 자식요소 선택.

 

---

 

1.

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

 

2.

:first-of-type 선택자 : 그 부모의 타입 고려 첫번째 자식요소.

 

:last-of-type 구문

 

$(":last-of-type")

 

:last-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:last-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;">

  <p>CSS</p>

  <p>디자인</p>

  <span>구조 보충</span>

</div>

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

 

결과보기

:last-of-type 예제 - cf. :last, :last-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>:last</button>

<button>:last-child</button>

<button>:last-of-type</button><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>

 

결과보기