목차
- parent > child 예제 - div 요소의 직접 자식요소 span 선택
- parent > child 정의
- parent > child 구문
- parent > child 예제 - ul 요소의 직접 자식요소인 li 선택
parent > child 예제 - div 요소의 직접 자식요소 span 선택
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("div > span").css("background-color", "yellow");
});
</script>
<h2>홈짱닷컴 Homzzang.com</h2>
<div style="border:1px solid black;padding:10px;">
<p>가</p>
<span>나</span>
<p><span>다</span></p>
</div>
결과보기
parent > child 정의
지정 요소의 직접 자식요소만 모두 선택.
CSS parent > child 선택자.
parent > child 구문
("parent > child")
[매개변수]
parent
필수. 부모요소.
child
필수. 직접 자식요소.
parent > child 예제 - ul 요소의 직접 자식요소인 li 선택
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("ul.hz > li").css("border", "1px solid red");
});
</script>
<ul class="hz">
<li>홈짱닷컴 Homzzang.com</li>
<li>가
<ul>
<li>나</li>
</ul>
</li>
<li>다</li>
</ul>
결과보기
PS. 주의
$("ul.hz > li").css("color", "red"); 경우, '나' 역시 빨간색이 됨.
(∵ color 속성 경우, 자손 요소에게 상속되기 때문.)