CSS-тегінің ұрпақ селекторы мен кластардың күрделі комбинациялары

Енді бізде келесі код бар делік:

<div class="block">
	<h2 class="header">Title h2</h2>
	<p>
		текст
	</p>
	
	<h3 class="header">Title h3</h3>
	<p>
		текст
	</p>
	<p>
		текст
	</p>
</div>
<div class="block">
	<h2 class="header">Title h2</h2>
	<p>
		текст
	</p>
	
	<h3 class="header">Title h3</h3>
	<p>
		текст
	</p>
	<p>
		текст
	</p>
</div>

block класы бар элементтің ішінде орналасқан, header класы бар барлық элементтерді тауып, оларға Arial қаріпін берейік:

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

HTML кодтан көрініп тұрғандай, block класы бар элементтің ішінде header класы бар элементтер h2 тақырыптары да, h3 тақырыптары да болуы мүмкін. Осы тақырыптарды ажырататын селекторларды жазып, осы тақырыптармен бірнәрсе істейік.

block класы бар элементтің ішінде орналасқан, header класы бар барлық h2 тақырыптарын таңдайық:

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

Енді block класы бар элементтің ішінде орналасқан, header класы бар барлық h3 тақырыптарын таңдайық:

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