HTML-i div-silt siltide grupeerimiseks

Eelmises õppetükis vaatlesime span silti, mis võimaldab teatud tekstiosa kuidagi esile tõsta. Samuti on olemas spetsiaalne div silt, mis võimaldab mitut silti grupeerida, et siis nendega midagi korraga teha.

Näiteks grupeerime div siltide abil lõike:

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

Määrame esimese grupi elementidele punase värvi ja teise grupi elementidele - rohelise:

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

Antud on järgmine kood:

<div>
	<h2>Pealkiri</h2>
	<p>
		text
	</p>
	<p>
		text
	</p>
</div>
<div>
	<h2>Pealkiri</h2>
	<p>
		text
	</p>
	<p>
		text
	</p>
	<p>
		text
	</p>
</div>
<div>
	<h2>Pealkiri</h2>
	<p>
		text
	</p>
	<p>
		text
	</p>
	<p>
		text
	</p>
	<p>
		text
	</p>
</div>

Värvige esimese divi sisu punaseks värviks, teise divi sisu - roheliseks, ja kolmanda divi sisu - sinakas. Määrake selleks igale div-ile oma klass.

Antud on järgmine kood:

<div>
	<h2>Pealkiri</h2>
	<p>
		text
	</p>
	<p>
		text
	</p>
</div>
<div>
	<h2>Pealkiri</h2>
	<p>
		text
	</p>
	<p>
		text
	</p>
</div>
<div>
	<h2>Pealkiri</h2>
	<p>
		text
	</p>
	<p>
		text
	</p>
</div>
<div>
	<h2>Pealkiri</h2>
	<p>
		text
	</p>
	<p>
		text
	</p>
</div>

Värvige esimese ja kolmanda divi sisu punaseks värviks, teise ja neljanda divi sisu - roheliseks. Selleks andke esimesele ja kolmandale div-ile üks klass ning teisele ja neljandale - teine klass.