[Selector] JQ - parent > child 선택자 ★ - 직접자식요소만 모두 선택 (= 직계자식요소 선택 = 자식선택자)

1. parent > child 예제 - div 요소의 직접 자식요소 span 선택
2. parent > child 정의
3. parent > child 구문
4. 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 속성 경우, 자손 요소에게 상속되기 때문.)