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