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