CSS의 자식 선택자

다음 코드가 있다고 가정해 봅시다:

html<p>
  text <b><i>bold italic</i></b>
</p>
<p>
  text <i>just italic</i>
</p>

단락 내에 있는 모든 i 태그를 선택하려고 합니다. 다음과 같이 할 수 있습니다:

cssp i {
  color: red;
}

코드 실행 결과:

이제 단락의 직접적인 자손인 i 태그만 선택해 봅시다. 자식 선택자 >가 이를 도와줄 것입니다.

사용 방법을 이해하기 위해 후손 선택자와 비교해 보겠습니다. 이렇게 하면: p i - 단락 내부의 모든 이탤릭체를 선택하고, 이렇게 하면: p > i - 단락의 직접적인 자손인 이탤릭체만 선택합니다.

이 선택자를 HTML 코드에 적용해 봅시다:

cssp > i {
  color: red;
}

코드 실행 결과:

html<ul>
  <li>
    <i>italic</i>
    <b>bold</b>
    <b><i>bold italic</i></b>
  </li>
  <li>
    <i>italic</i>
    <b>bold</b>
    <b><i>bold italic</i></b>
  </li>
</ul>