CSS-da avlodlar va classlar selektorining murakkab kombinatsiyalari

Keling, quyidagi kodni olamiz.

<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>

block classli element ichida joylashgan header classli barcha elementlarni topamiz va ularga Arial shriftini o'rnatamiz.

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

HTML kodida ko'rib turganingizdek, block classiga ega element ichida header classiga ega elementlar h2 va h3 sarlavhalari bo'lishi mumkin. Keling, ushbu sarlavhalarni ajratib turadigan selektorlarni yozamiz va bu sarlavhalar bilan nimadir qilamiz.

block classli element ichida joylashgan header classli barcha h2 ni tanlaymiz.

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

Va endi biz block classli element ichida joylashgan barcha header classli h3 ni tanlaymiz.

.block h3.header {
	font-size: 20px;
	color: green;
}

Keling, barcha CSS-ni birlashtiraylik.

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