자식 요소와 직속 자식 요소

예시

<i>Outside</i>
<div class="div1">
  <i>Inside 1</i>
  <p>Blah blah <i>Inside 2</i></p>
  <i>Inside 3</i>
</div>

자식 요소 (children)

.div1 i {font-weight: bold;}
'div1' 클래스를 갖고 있는 요소의 자식(+손자, 증손자...) 중 모든 <i> 태그

Outside
Inside 1
Blah blah Inside 2
Inside 3

Inside 1, Inside 3은 자식,
Inside 2는 손자

직속 자식 요소 (direct children)

.div1 > i {font-weight: bold;}
'div1' 클래스를 갖고 있는 요소의 직속 자식 중 모든 <i> 태그

Outside
Inside 1
Blah blah Inside 2
Inside 3

Inside 1, Inside 3만 직속 자식
Inside 2는 .div1 > p > i 로 직속 자식이 아님