목차
- :last-of-type 예제 - 그 부모의 타입 고려 마지막 자식p요소.
- :last-of-type 정의
- :last-of-type 구문
- :last-of-type 예제 - div의 타입 고려 마지막 자식p요소.
- :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>
결과보기
