Tagu div për grupimin e tagjeve në HTML

Në mësimin e mëparshëm shqyrtuam tagun span, i cili lejon të theksohet një pjesë e tekstit. Ekziston gjithashtu një tag i veçantë div, i cili lejon grupimin e disa tagjeve, në mënyrë që më pas të bëhet diçka me të gjitha njëherësh.

Le të përdorim si shembull tagjet div për të grupuar paragrafët:

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

Le t'u caktojmë elementeve nga grupi i parë ngjyrën e kuqe, dhe elementeve nga grupi i dytë - ngjyrën e gjelbër:

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

Është dhënë kodi vijues:

<div>
	<h2>Title</h2>
	<p>
		text
	</p>
	<p>
		text
	</p>
</div>
<div>
	<h2>Title</h2>
	<p>
		text
	</p>
	<p>
		text
	</p>
	<p>
		text
	</p>
</div>
<div>
	<h2>Title</h2>
	<p>
		text
	</p>
	<p>
		text
	</p>
	<p>
		text
	</p>
	<p>
		text
	</p>
</div>

Ngjyrosni përmbajtjen e div-it të parë në të kuqe, përmbajtjen e div-it të dytë - në të gjelbër, dhe përmbajtjen e div-it të tretë - në të kaltër. Për këtë, caktoni secilit div klasën e vet.

Është dhënë kodi vijues:

<div>
	<h2>Title</h2>
	<p>
		text
	</p>
	<p>
		text
	</p>
</div>
<div>
	<h2>Title</h2>
	<p>
		text
	</p>
	<p>
		text
	</p>
</div>
<div>
	<h2>Title</h2>
	<p>
		text
	</p>
	<p>
		text
	</p>
</div>
<div>
	<h2>Title</h2>
	<p>
		text
	</p>
	<p>
		text
	</p>
</div>

Ngjyrosni përmbajtjen e div-it të parë dhe të tretë në të kuqe, përmbajtjen e div-it të dytë dhe të katërt - në të gjelbër. Për këtë, div-it të parë dhe të tretë jepni një klasë, ndërsa div-it të dytë dhe të katërt - një klasë tjetër.