HTML-да тегларни гуруҳлаш учун div теги

Олдинги дарсда биз матннинг бир бўлагини қандайдир ажратиб олиш имконини берувчи span тегини кўриб чиқдик. Шунингдек, бир нечта тегни гуруҳлаш ва уларга бир вақтнинг ўзида бирор нарса қилиш имконини берувчи div теги мавжуд.

Мисол учун, div теглари ёрдамида абзацларни гуруҳлаймиз:

<div class="block1">
	<p>
		матн
	</p>
	<p>
		матн
	</p>
</div>
<div class="block2">
	<p>
		матн
	</p>
	<p>
		матн
	</p>
</div>

Биринчи гуруҳ элементларига қизил ранг берайлик, иккинчи гуруҳ элементларига эса - яшил ранг:

.block1 {
	color: red;
}
.block2 {
	color: green;
}

Куйидаги код берилган:

<div>
	<h2>Сарлавҳа</h2>
	<p>
		матн
	</p>
	<p>
		матн
	</p>
</div>
<div>
	<h2>Сарлавҳа</h2>
	<p>
		матн
	</p>
	<p>
		матн
	</p>
	<p>
		матн
	</p>
</div>
<div>
	<h2>Сарлавҳа</h2>
	<p>
		матн
	</p>
	<p>
		матн
	</p>
	<p>
		матн
	</p>
	<p>
		матн
	</p>
</div>

Биринчи див ичидогиларни қизил рангга, иккинчи див ичидогиларни яшил рангга, учинчи див ичидогиларни эса кўк рангга боянг. Буни амалга ошириш учун ҳар бир дивга ўз классини беринг.

Куйидаги код берилган:

<div>
	<h2>Сарлавҳа</h2>
	<p>
		матн
	</p>
	<p>
		матн
	</p>
</div>
<div>
	<h2>Сарлавҳа</h2>
	<p>
		матн
	</p>
	<p>
		матн
	</p>
</div>
<div>
	<h2>Сарлавҳа</h2>
	<p>
		матн
	</p>
	<p>
		матн
	</p>
</div>
<div>
	<h2>Сарлавҳа</h2>
	<p>
		матн
	</p>
	<p>
		матн
	</p>
</div>

Биринчи ва учинчи див ичидогиларни қизил рангга, иккинчи ва тўртинчи див ичидогиларни эса яшил рангга боянг. Буни амалга ошириш учун биринчи ва учинчи дивларга бир класс, иккинчи ва тўртинчи дивларга эса бошқа класс беринг.