CSSにおける子孫セレクタとクラスの複雑な組み合わせ

では、以下のコードがあるとします：

<div class="block">
	<h2 class="header">Title h2</h2>
	<p>
		text
	</p>
	
	<h3 class="header">Title h3</h3>
	<p>
		text
	</p>
	<p>
		text
	</p>
</div>
<div class="block">
	<h2 class="header">Title h2</h2>
	<p>
		text
	</p>
	
	<h3 class="header">Title h3</h3>
	<p>
		text
	</p>
	<p>
		text
	</p>
</div>

クラスheaderを持つ要素のうち、クラスblockを持つ要素の内側にあるものすべてを選択し、フォントファミリーをArialに設定しましょう：

.block .header {
	font-family: Arial;
}

HTMLコードからわかるように、クラスblockを持つ要素の内側では、クラスheaderを持つ要素はh2見出しにもh3見出しにもなれます。これらの見出しを区別するセレクタを書き、それぞれの見出しに対して何か操作をしてみましょう。

クラスblockを持つ要素の内側にある、クラスheaderを持つすべてのh2を選択しましょう：

.block h2.header {
	font-size: 30px;
	color: red;
}

次に、クラスblockを持つ要素の内側にある、クラスheaderを持つすべてのh3を選択しましょう：

.block h3.header {
	font-size: 20px;
	color: green;
}

すべてのCSSをまとめてみましょう：

.block .header {
	font-family: Arial;
}
.block h2.header {
	font-size: 30px;
	color: red;
}
.block h3.header {
	font-size: 20px;
	color: green;
}

このCSSを私たちのHTMLコードに適用してみましょう：

以下のコードにあるセレクタが何を選択するか説明してください。その後、そのセレクタに適合するHTMLコードを書いてください。セレクタのコードは以下の通りです：

.eee .bbb {
	color: red;
}

.eee h2 {
	color: red;
}

.eee h2.bbb {
	color: red;
}

.eee h3.bbb {
	color: red;
}

.eee p.bbb {
	color: red;
}

.eee .bbb .kkk {
	color: red;
}