CSS-de nesil saýlaýjylary we klasslaryň çylşyrym birleşdirmeleri

Indi bizde aşakdaky kod bardyr:

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

Geliň, block klassly element içinde ýerleşýän header klassly ähli elementleri tapalyň we olara Arial şriftini belleýeliň:

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

HTML kodunda görşüň ýaly, block klassly element içinde header klassly elementler h2 sözbaşy hem, h3 sözbaşy hem bolup biler. Geliň, bu sözbaşylary tapawutlandyrýan saýlaýjylary ýazalyň we bu sözbaşylar bilen bir zat edeliň.

Geliň, block klassly element içinde ýerleşýän, header klassly ähli h2 elementlerini saýlaýalyň:

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

Indi bolsa, block klassly element içinde ýerleşýän, header klassly ähli h3 elementlerini saýlaýalyň:

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

Geliň, ähli CSS kodymyzy bilelikde jemläýliň:

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

Ony HTML kodymyza ulanyň: