자손 선택자(Child combinators) VS 후손 선택자(Descendant combiantors)

자손 선택자(Child combinators) VS 후손 선택자(Descendant combiantors)

자손 선택자(Child combinators)

기호를 사용하여 부모 요소와 직계 자식 요소를 선택
예를 들어, 아래와 같은 HTML 코드가 있다고 가정해 봅시다.```
코드를 입력하세요

  <ul>
    <li>Item 1</li>
    <li>Item 2</li>
  </ul>
</div>
이 경우, div 요소의 직계 ul 요소를 선택하려면 다음과 같이 CSS를 작성할 수 있습니다.

div > ul {
  /* 스타일 지정 */
}

위의 CSS는 div 요소의 직계 자식 중에서 ul 요소를 선택합니다. 다른 하위 요소는 선택되지 않습니다.

후손 선택자(Descendant combinator)

공백 문자를 사용하여 부모 요소와 하위 자식 요소를 선택
예를 들어, 아래와 같은 HTML 코드가 있다고 가정해 봅시다.

<div>
 <ul>
   <li>Item 1</li>
   <li>Item 2</li>
 </ul>
</div>

이 경우, div 요소의 하위 li 요소를 선택하려면 다음과 같이 CSS를 작성할 수 있습니다.

  /* 스타일 지정 */
}

위의 CSS는 div 요소의 하위 자식 중에서 li 요소를 선택합니다. ul 요소도 li 요소의 부모 요소이므로 선택됩니다

Child combinator와 descendant combinator는 CSS 선택자에서 각각 다른 목적을 가지고 사용됩니다. Child combinator는 부모 요소와 직계 자식 요소를 선택하여 더 구체적인 스타일을 적용하는 데 사용됩니다. 반면, descendant combinator는 부모 요소와 하위 자식 요소를 선택하여 더 일반적인 스타일을 적용하는 데 사용됩니다.