• Q&A
  • 회원가입
  • 로그인

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

180  
목차
  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 속성 경우, 자손 요소에게 상속되기 때문.)



찾아주셔서 감사합니다. Since 2012