CSSにおける子孫セレクター

ここにulリストと olリストがあるとします：

<ul>
	<li>テキスト</li>
	<li>テキスト</li>
	<li>テキスト</li>
	<li>テキスト</li>
	<li>テキスト</li>
</ul>
<ol>
	<li>テキスト</li>
	<li>テキスト</li>
	<li>テキスト</li>
	<li>テキスト</li>
	<li>テキスト</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;
}

子孫セレクターは必ずしも2つのタグセレクターで構成される必要はなく、スペースで区切られた任意の数のセレクターで構成できます。例えば、次のコードでは、liタグ内にあり、そのliタグがさらにulタグ内に存在するすべてのiタグが選択されます：

ul li i {
	color: red;
}

次のコードが与えられています：

<ul>
	<li>テキスト <i>斜体</i></li>
	<li>テキスト <i>斜体</i></li>
	<li>テキスト <i>斜体</i></li>
	<li>テキスト <i>斜体</i></li>
</ul>

<p>
	段落テキスト <i>斜体</i>
</p>
<p>
	段落テキスト <i>斜体</i>
</p>

ulタグからの斜体を赤色に、 pタグからの斜体を緑色に着色してください。

次のコードが与えられています：

<p>
	段落テキスト <b><i>太字斜体</i></b>
</p>
<p>
	段落テキスト <i>斜体</i>
</p>

pタグ内にあり、さらにその中にある bタグ内にある斜体を赤色に着色してください。