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>

block классига эга бўлган элемент ичида жойлашган header классига эга барча элементларни топишга ҳаракат қилайлик ва уларга Arial шрифтини белгилаймиз:

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

HTML кодидан кўриниб турибдики, block классига эга бўлган элемент ичида header классига эга элементлар h2 сарлавҳаси ҳам, h3 сарлавҳаси ҳам бўлиши мумкин. Келик, ушбу сарлавҳаларни ажратиб кўрсатадиган селекторларни ёзиб, улар бирор иш бажарамиз.

block классига эга бўлган элемент ичида жойлашган header классига эга барча h2 элементларини танлаймиз:

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

Энди эса, block классига эга бўлган элемент ичида жойлашган header классига эга барча h3 элементларини танлаймиз:

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