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タグのみを赤色にしてください。