Div tag za grupisanje tagova u HTML-u

U prethodnoj lekciji smo razmotrili tag span, koji omogućava da se izdvoji neki deo teksta. Takođe postoji specijalni tag div, koji omogućava grupisanje više tagova, da bi se zatim s njima moglo nešto uraditi istovremeno.

Neka za primer pomoću tagova div grupišemo pasuse:

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

Dodelimo elementima iz prve grupe crvenu boju, a elementima iz druge grupe - zelenu:

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

Dat je sledeći kod:

<div>
	<h2>Naslov</h2>
	<p>
		tekst
	</p>
	<p>
		tekst
	</p>
</div>
<div>
	<h2>Naslov</h2>
	<p>
		tekst
	</p>
	<p>
		tekst
	</p>
	<p>
		tekst
	</p>
</div>
<div>
	<h2>Naslov</h2>
	<p>
		tekst
	</p>
	<p>
		tekst
	</p>
	<p>
		tekst
	</p>
	<p>
		tekst
	</p>
</div>

Obojite sadržaj prvog diva u crvenu boju, sadržaj drugog diva - u zelenu, a sadržaj trećeg diva - u plavu. Dodelite za to svakom divu svoju klasu.

Dat je sledeći kod:

<div>
	<h2>Naslov</h2>
	<p>
		tekst
	</p>
	<p>
		tekst
	</p>
</div>
<div>
	<h2>Naslov</h2>
	<p>
		tekst
	</p>
	<p>
		tekst
	</p>
</div>
<div>
	<h2>Naslov</h2>
	<p>
		tekst
	</p>
	<p>
		tekst
	</p>
</div>
<div>
	<h2>Naslov</h2>
	<p>
		tekst
	</p>
	<p>
		tekst
	</p>
</div>

Obojite sadržaj prvog i trećeg diva u crvenu boju, sadržaj drugog diva i četvrtog - u zelenu. Za to prvom i trećem divu dodelite jednu klasu, a drugom i četvrtom - drugu klasu.