Σύνθετοι συνδυασμοί επιλογέα απόγονων και κλάσεων στο CSS

Ας υποθέσουμε τώρα ότι έχουμε τον ακόλουθο κώδικα:

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

Ας βρούμε όλα τα στοιχεία με κλάση 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;
}