Сложни комбинации на селектор за потомци и класове в 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. Нека напишем селектори, които различават тези заглавия, и да направим нещо с тези заглавия.

Нека изберем всички h2 с клас header, които се намират вътре в елемент с клас block:

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

А сега нека изберем всички h3 с клас header, които се намират вътре в елемент с клас block:

.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;
}

Нека го приложим към нашия 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;
}