Иттиҳомияи мураккаби интихобкунандаи наслӣ ва синфҳо дар 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>

Биёед ҳамаи элементҳои бо синфи 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;
}