목차
- :first-of-type 예제 - 그 부모의 타입 고려 첫번째 P자식요소
- :first-of-type 정의
- :first-of-type 구문
- :first-of-type 예제 - 각 div의 타입 고려 첫번째 P자식요소
- :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>
결과보기
