Div-taggen for gruppering av tagger i HTML

I forrige leksjon analyserte vi taggen span, som lar oss markere et lite stykke tekst på en eller annen måte. Det finnes også en spesiell tagg div, som lar oss gruppere flere tagger for deretter å gjøre noe med dem samtidig.

La oss for eksempel ved hjelp av div-tagger gruppere avsnitt:

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

La oss tildele rød farge til elementene fra den første gruppen, og grønn farge til elementene fra den andre gruppen - grønn:

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

Følgende kode er gitt:

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

Farg innholdet i den første div-en i rød farge, innholdet i den andre div-en - i grønn, og innholdet i den tredje div-en - i blå. Tilordne hver div sin egen klasse for å gjøre dette.

Følgende kode er gitt:

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

Farg innholdet i den første og tredje div-en i rød farge, innholdet i den andre og fjerde div-en - i grønn. For å gjøre dette, gi den første og tredje div-en én klasse, og den andre og fjerde - en annen klasse.