Сложни комбинации на селектор за потомци и класи во 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;
}

Објаснете, што избира селекторот во даденит код подолу. Потоа напишете HTML код, кој одговара на овој селектор. Еве го кодот со селекторот:

.eee h2.bbb {
	color: red;
}

.eee h3.bbb {
	color: red;
}

.eee p.bbb {
	color: red;
}

.eee .bbb .kkk {
	color: red;
}