Prvok div pre zoskupenie prvkov v HTML

V predchádzajúcej lekcii sme rozobrali prvok span, ktorý umožňuje nejako zvýrazniť časť textu. Existuje aj špeciálny prvok div, ktorý umožňuje zoskupiť niekoľko prvkov, aby sme s nimi potom mohli urobiť niečo naraz.

Nech napríklad pomocou prvkov div zoskupíme odseky:

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

Nastavme prvkom z prvej skupiny červenú farbu, a prvkom z druhej skupiny - zelenú:

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

Daný je nasledujúci kód:

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

Zafarbite obsah prvého div-u na červenú farbu, obsah druhého div-u - na zelenú, a obsah tretieho div-u - na modrú. Nastavte na to každému div-u svoju triedu.

Daný je nasledujúci kód:

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

Zafarbite obsah prvého a tretieho div-u na červenú farbu, obsah druhého div-u a štvrtého - na zelenú. Na to prvému a tretiemu div-u dajte jednu triedu, a druhému a štvrtému - inú triedu.