Kombinimet komplekse të selektorit të pasardhësve dhe klasave në CSS

Le të themi se tani kemi kodin e mëposhtëm:

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

Le të gjejmë të gjithë elementet me klasën header, që ndodhen brenda elementit me klasën block, dhe t'u caktojmë fontin Arial:

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

Siç shihet në kodin HTML, brenda elementit me klasën block elementet me klasën header mund të jenë ose tituj h2, ose tituj h3. Le të shkruajmë selektorë që i dallojnë këto tituj, dhe të bëjmë diçka me këta tituj.

Le të zgjedhim të gjithë h2 me klasën header, që ndodhen brenda elementit me klasën block:

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

Dhe tani le të zgjedhim të gjithë h3 me klasën header, që ndodhen brenda elementit me klasën block:

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

Le të mbledhim të gjithë CSS-në tonë së bashku:

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

Le ta aplikojmë atë në kodin tonë HTML: