[Selector] JQ - parent descendant 선택자 ★ - 자손요소 모두 선택. (= 자손선택자)

1. parent descendant 예제 - div 요소의 자손요소 span 선택.
2. parent descendant 정의
3. parent descendant 구문
4. parent descendant 예제 - ul 요소의 자손요소 li 선택.

parent descendant 예제 - 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 descendant 정의

 

지정 요소의 지정 자손요소 모두 선택.

 

---

 

CSS parent descendant 선택자. 

 

parent descendant 구문

 

("parent descendant")

 

---

[매개변수]

 

parent 

필수. 부모요소.

 

descendant

필수. 자손요소.

 

parent descendant 예제 - 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>

 

결과보기