Znacznik div do grupowania znaczników w HTML

W poprzedniej lekcji omówiliśmy znacznik span, który pozwala w jakiś sposób wyróżnić fragment tekstu. Istnieje również specjalny znacznik div, który pozwala zgrupować kilka znaczników, aby następnie móc zrobić z nimi coś jednocześnie.

Niech jako przykład za pomocą znaczników div zgrupujemy akapity:

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

Nadajmy elementom z pierwszej grupy czerwony kolor, a elementom z drugiej grupy - zielony:

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

Dany jest następujący kod:

<div>
	<h2>Tytuł</h2>
	<p>
		tekst
	</p>
	<p>
		tekst
	</p>
</div>
<div>
	<h2>Tytuł</h2>
	<p>
		tekst
	</p>
	<p>
		tekst
	</p>
	<p>
		tekst
	</p>
</div>
<div>
	<h2>Tytuł</h2>
	<p>
		tekst
	</p>
	<p>
		tekst
	</p>
	<p>
		tekst
	</p>
	<p>
		tekst
	</p>
</div>

Pokoloruj zawartość pierwszego diva na czerwono, zawartość drugiego diva - na zielono, a zawartość trzeciego diva - na niebiesko. Nadaj w tym celu każdemu divowi własną klasę.

Dany jest następujący kod:

<div>
	<h2>Tytuł</h2>
	<p>
		tekst
	</p>
	<p>
		tekst
	</p>
</div>
<div>
	<h2>Tytuł</h2>
	<p>
		tekst
	</p>
	<p>
		tekst
	</p>
</div>
<div>
	<h2>Tytuł</h2>
	<p>
		tekst
	</p>
	<p>
		tekst
	</p>
</div>
<div>
	<h2>Tytuł</h2>
	<p>
		tekst
	</p>
	<p>
		tekst
	</p>
</div>

Pokoloruj zawartość pierwszego i trzeciego diva na czerwono, zawartość drugiego diva i czwartego - na zielono. W tym celu pierwszemu i trzeciemu divowi nadaj jedną klasę, a drugiemu i czwartemu - inną klasę.