---

Сложные комбинации селектора потомков и классов в 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 коду:

открыть в дочернем окне
№1⊗jsPmSMMA

Расскажите, что выбирает селектор в приведенном ниже коде. Затем напишите HTML код, подходящий под этот селектор. Вот код с селектором:

.eee .bbb {
	color: red;
}
Ответ: класс eee -> класс bbb

№2⊗jsPmSMMA

Расскажите, что выбирает селектор в приведенном ниже коде. Затем напишите HTML код, подходящий под этот селектор. Вот код с селектором:

.eee h2 {
	color: red;
}
Ответ: класс eee -> заголовок h2
№3⊗jsPmSMMA

Расскажите, что выбирает селектор в приведенном ниже коде. Затем напишите HTML код, подходящий под этот селектор. Вот код с селектором:

.eee h2.bbb {
	color: red;
}
Ответ: класс eee -> заголовок h2 -> класс bbb
№4⊗jsPmSMMA

Расскажите, что выбирает селектор в приведенном ниже коде. Затем напишите HTML код, подходящий под этот селектор. Вот код с селектором:

.eee h3.bbb {
	color: red;
}
Ответ: класс eee -> заголовок h3 -> класс bbb
№5⊗jsPmSMMA

Расскажите, что выбирает селектор в приведенном ниже коде. Затем напишите HTML код, подходящий под этот селектор. Вот код с селектором:

.eee p.bbb {
	color: red;
}
Ответ: класс eee -> абзац p -> класс bbb 
№6⊗jsPmSMMA

Расскажите, что выбирает селектор в приведенном ниже коде. Затем напишите HTML код, подходящий под этот селектор. Вот код с селектором:

.eee .bbb .kkk {
	color: red;
}
Ответ: класс eee -> класс bbb -> класс kkk