A div tag a HTML tagok csoportosításához

Az előző leckében megvizsgáltuk a span taget, amely lehetővé teszi a szöveg egy részének kiemelését. Létezik egy speciális div tag is, amely lehetővé teszi több tag csoportosítását, hogy aztán egyszerre valamit tehessünk velük.

Példaként a div tag segítségével csoportosítsuk a bekezdéseket:

<div class="block1">
	<p>
		szöveg
	</p>
	<p>
		szöveg
	</p>
</div>
<div class="block2">
	<p>
		szöveg
	</p>
	<p>
		szöveg
	</p>
</div>

Adjunk az első csoport elemeinek piros színt, a második csoport elemeinek pedig zöldet:

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

Adott a következő kód:

<div>
	<h2>Cím</h2>
	<p>
		szöveg
	</p>
	<p>
		szöveg
	</p>
</div>
<div>
	<h2>Cím</h2>
	<p>
		szöveg
	</p>
	<p>
		szöveg
	</p>
	<p>
		szöveg
	</p>
</div>
<div>
	<h2>Cím</h2>
	<p>
		szöveg
	</p>
	<p>
		szöveg
	</p>
	<p>
		szöveg
	</p>
	<p>
		szöveg
	</p>
</div>

Színezze az első div tartalmát pirosra, a második div tartalmát zöldre, a harmadik div tartalmát pedig kékre. Ehhez adjon minden div-nek saját osztályt.

Adott a következő kód:

<div>
	<h2>Cím</h2>
	<p>
		szöveg
	</p>
	<p>
		szöveg
	</p>
</div>
<div>
	<h2>Cím</h2>
	<p>
		szöveg
	</p>
	<p>
		szöveg
	</p>
</div>
<div>
	<h2>Cím</h2>
	<p>
		szöveg
	</p>
	<p>
		szöveg
	</p>
</div>
<div>
	<h2>Cím</h2>
	<p>
		szöveg
	</p>
	<p>
		szöveg
	</p>
</div>

Színezze az első és a harmadik div tartalmát pirosra, a második és a negyedik div tartalmát zöldre. Ehhez az első és a harmadik div-nek adjon egy osztályt, a második és a negyedik div-nek pedig egy másik osztályt.