HTML dagi teglarni guruhlash uchun div tegi

Oldingi darsda biz matnning bir qismini qandaydir ajratib ko‘rsatishga imkon beradigan span tegini ko‘rib chiqdik. Shuningdek, bir nechta teglarni guruhlab, keyin ularga bir vaqtning o‘zida biror narsa qilish imkonini beruvchi maxsus div tegi mavjud.

Misol uchun, div teglari yordamida abzatslarni guruhlaymiz:

<div class="block1">
	<p>
		matn
	</p>
	<p>
		matn
	</p>
</div>
<div class="block2">
	<p>
		matn
	</p>
	<p>
		matn
	</p>
</div>

Keling, birinchi guruhdagi elementlarga qizil rang, ikkinchi guruhdagi elementlarga esa yashil rang belgilaymiz:

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

Quyidagi kod berilgan:

<div>
	<h2>Sarlavha</h2>
	<p>
		matn
	</p>
	<p>
		matn
	</p>
</div>
<div>
	<h2>Sarlavha</h2>
	<p>
		matn
	</p>
	<p>
		matn
	</p>
	<p>
		matn
	</p>
</div>
<div>
	<h2>Sarlavha</h2>
	<p>
		matn
	</p>
	<p>
		matn
	</p>
	<p>
		matn
	</p>
	<p>
		matn
	</p>
</div>

Birinchi div mazmunini qizil rangga, ikkinchi div mazmunini yashil rangga, uchinchi div mazmunini ko‘k rangga bo‘yang. Buning uchun har bir divga o‘z classini belgilang.

Quyidagi kod berilgan:

<div>
	<h2>Sarlavha</h2>
	<p>
		matn
	</p>
	<p>
		matn
	</p>
</div>
<div>
	<h2>Sarlavha</h2>
	<p>
		matn
	</p>
	<p>
		matn
	</p>
</div>
<div>
	<h2>Sarlavha</h2>
	<p>
		matn
	</p>
	<p>
		matn
	</p>
</div>
<div>
	<h2>Sarlavha</h2>
	<p>
		matn
	</p>
	<p>
		matn
	</p>
</div>

Birinchi va uchinchi div mazmunini qizil rangga, ikkinchi va to‘rtinchi div mazmunini yashil rangga bo‘yang. Buning uchun birinchi va uchinchi divlarga bitta class, ikkinchi va to‘rtinchi divlarga boshqa class bering.