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>

პირველი და მესამე დივის შიგთავსი გააწითლეთ, მეორე და მეოთხე დივის შიგთავსი - გაამწვანეთ. ამისთვის პირველ და მესამე დივს მიანიჭეთ ერთი კლასი, ხოლო მეორეს და მეოთხეს - სხვა კლასი.