Комплексне комбинације селектора потомака и класа у ЦСС-у

Нека сада имамо следећи код:

<div class="block">
	<h2 class="header">Наслов х2</h2>
	<p>
		текст
	</p>
	
	<h3 class="header">Наслов х3</h3>
	<p>
		текст
	</p>
	<p>
		текст
	</p>
</div>
<div class="block">
	<h2 class="header">Наслов х2</h2>
	<p>
		текст
	</p>
	
	<h3 class="header">Наслов х3</h3>
	<p>
		текст
	</p>
	<p>
		текст
	</p>
</div>

Хајде да пронађемо све елементе са класом header, који се налазе унутар елемента са класом block, и задамо им фонт Arial:

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

Као што се види у ХТМЛ коду, унутар елемента са класом 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;
}

Хајде да сакупимо цео наш ЦСС заједно:

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

Применимо га на наш ХТМЛ код:

Објасните шта бира селектор у наведеном коду испод. Затим напишите ХТМЛ код који одговара том селектору. Ево кода са селектором:

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