Combinazioni complesse di selettori discendenti e classi in CSS

Supponiamo ora di avere il seguente codice:

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

Troviamo tutti gli elementi con classe header, che si trovano all'interno di un elemento con classe block, e impostiamo per loro il font Arial:

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

Come si vede nel codice HTML, all'interno dell'elemento con classe block gli elementi con classe header possono essere sia titoli h2, che titoli h3. Scriviamo dei selettori che distinguano questi titoli, e facciamo qualcosa con questi titoli.

Selezioniamo tutti i h2 con classe header, che si trovano all'interno di un elemento con classe block:

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

E ora selezioniamo tutti i h3 con classe header, che si trovano all'interno di un elemento con classe block:

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

Mettiamo insieme tutto il nostro CSS:

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

Applichiamolo al nostro codice HTML: