Ingewikkelde kombinasies van afstammelingselekteerders en klasse in CSS

Laat ons nou die volgende kode hê:

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

Kom ons vind alle elemente met klas header, wat binne die element met klas block geleë is, en ken die font Arial aan hulle toe:

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

Soos in die HTML-kode gesien kan word, kan elemente met klas header binne die element met klas block óf h2-opsies wees, óf h3-opsies. Kom ons skryf selekteerders wat hierdie opsies onderskei, en iets met hierdie opsies doen.

Kom ons kies alle h2 met klas header, wat binne die element met klas block geleë is:

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

En nou kies ons alle h3 met klas header, wat binne die element met klas block geleë is:

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

Kom ons sit al ons CSS saam:

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

Laat ons dit op ons HTML-kode toepas: