Селектор нащадків та класи

Нехай у нас є наступний код:

<div class="block">
	<h2>заголовок</h2>
	<p>
		текст
	</p>
</div>
<div class="block">
	<h2>заголовок</h2>
	<p>
		текст
	</p>
</div>

Давайте виберемо всі заголовки h2 та абзаци, що знаходяться всередині елемента з класом block, і пофарбуємо їх у різні кольори. Використаємо для цього селектор нащадків (який пробіл між селекторами):

.block h2 {
	color: red;
}
.block p {
	color: green;
}

Дано наступний код:

<p class="eee">
	текст <i>курсив</i>
</p>
<p class="eee">
	текст <i>курсив</i>
</p>
<div class="eee">
	текст <i>курсив</i>
</div>
<div class="eee">
	текст <i>курсив</i>
</div>

Пофарбуйте у червоний колір усі теги i, що знаходяться в елементах з класом eee.

Більш складні комбінації

Нехай тепер ми маємо наступний код:

<div class="block">
	<h2 class="header">заголовок h2</h2>
	<p>
		текст
	</p>
	
	<h3 class="header">заголовок h3</h3>
	<p>
		текст
	</p>
	<p>
		текст
	</p>
</div>
<div class="block">
	<h2 class="header">заголовок h2</h2>
	<p>
		текст
	</p>
	
	<h3 class="header">заголовок h3</h3>
	<p>
		текст
	</p>
	<p>
		текст
	</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;
}