HTML'de Etiketleri Gruplamak için div Etiketi

Önceki derste, bir metin parçasını vurgulamamızı sağlayan span etiketini inceledik. Ayrıca, daha sonra hepsine aynı anda bir şey yapmak için birden fazla etiketi gruplamamızı sağlayan özel bir div etiketi de bulunmaktadır.

Örnek olarak, div etiketlerini kullanarak paragrafları gruplayalım:

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

İlk gruptaki elemanlara kırmızı rengi atayalım, ikinci gruptaki elemanlara ise yeşil rengi atayalım:

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

Aşağıdaki kod verilmiştir:

<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>

İlk div'in içeriğini kırmızı, ikinci div'in içeriğini yeşil, üçüncü div'in içeriğini ise mavi renge boyayın. Bunun için her div'e kendi sınıfını verin.

Aşağıdaki kod verilmiştir:

<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>

Birinci ve üçüncü div'in içeriğini kırmızı, ikinci ve dördüncü div'in içeriğini yeşile boyayın. Bunun için birinci ve üçüncü dive bir sınıf, ikinci ve dördüncü dive ise başka bir sınıf verin.