CSS에서의 자손 선택자

ul 목록과 ol 목록이 있다고 가정해 봅시다:

<ul>
	<li>text</li>
	<li>text</li>
	<li>text</li>
	<li>text</li>
	<li>text</li>
</ul>
<ol>
	<li>text</li>
	<li>text</li>
	<li>text</li>
	<li>text</li>
	<li>text</li>
</ol>

이 목록들 안에 있는 li 태그들을 빨간색으로 칠해 봅시다:

li {
	color: red;
}

이제는 ul 목록의 li 태그는 빨간색으로, ol 목록의 li 태그는 초록색으로 칠하고 싶다고 가정해 봅시다.

이럴 때 자손 선택자가 도움이 됩니다. 이 선택자는 부모 요소에 따라 자식 태그를 선택할 수 있게 해줍니다. 이를 위해서는 부모 선택자를 지정하고, 공백 뒤에 자손 선택자를 지정하면 됩니다. 우리의 경우 ul li 선택자는 ul 목록 안의 모든 li 태그를 선택하고, ol li 선택자는 ol 목록 안의 모든 li 태그를 선택할 것입니다. 이들을 원하는 색으로 칠해 봅시다:

ul li {
	color: red;
}
ol li {
	color: green;
}

자손 선택자는 반드시 두 개의 태그 선택자로 구성될 필요는 없습니다. 공백으로 구분하여 원하는 수만큼의 선택자를 나열할 수 있습니다. 예를 들어, 다음 코드에서는 ul 태그 안에 있는 li 태그 안에 위치한 모든 i 태그를 선택합니다:

ul li i {
	color: red;
}

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

<ul>
	<li>text <i>italic</i></li>
	<li>text <i>italic</i></li>
	<li>text <i>italic</i></li>
	<li>text <i>italic</i></li>
</ul>

<p>
	paragraph text <i>italic</i>
</p>
<p>
	paragraph text <i>italic</i>
</p>

ul 태그 안의 기울임꼴 텍스트는 빨간색으로, p 태그 안의 기울임꼴 텍스트는 초록색으로 칠하세요.

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

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

p 태그 안에 있고, 그 안에 b 태그 안에 있는 기울임꼴 텍스트를 빨간색으로 칠하세요.