CSS의 자식 선택자

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

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

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

p i {
	color: red;
}

코드 실행 결과:

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

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

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

p > i {
	color: red;
}

코드 실행 결과:

다음 코드가 주어졌습니다:

<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>

li 태그의 직접적인 자손인 b 태그만 빨간색으로 칠하세요.