Складаныя камбінацыі селектара нашчадкаў і класаў у 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;
}