[FE] 후손선택자와 자식선택자

후손선택자와 자식선택자의 차이

구분	의미	예시	설명
후손 선택자	특정 요소의 '모든 하위 요소'	div p {}	div 안에 있는 모든 p에 적용
자식 선택자	특정 요소의 '직접 자식만'	div > p {}	div 바로 아래 p에만 적용

후손선택자

html

<div>
  <p>적용됨</p>
  <section>
    <p>이것도 적용됨</p>
  </section>
</div>

css

/* 후손 선택자: div 안에 있는 모든 p */
div p {
  color: red;
}

자식선택자

html

<div>
  <p>적용됨</p>
  <section>
    <p>적용 안됨</p>
  </section>
</div>

css

/* 자식 선택자: div 안에 있는 모든 p */
div > p {
  color: red;
}

정리

후손 선택자(공백) → 모든 하위 요소 적용
자식 선택자(>) → 바로 아래 자식만 적용