HTML-тег div тегтерді топтау үшін

Алдыңғы сабақта біз мәтіндің бір бөлігін біршама ерекшелеуге мүмкіндік беретін span тегін қарастырдық. Сонымен қатар, бірнеше тегті топтастыруға және олармен бірге бірдеңе жасауға мүмкіндік беретін арнайы div тегі бар.

Мысал ретінде div тегтерінің көмегімен біз абзацтарды топтастырайық:

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

Бірінші топтағы элементтерге қызыл түс беріп, ал екінші топтағы элементтерге жасыл түс берейік:

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

Берілген код:

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

Бірінші div ішіндегілерді қызыл түске, екінші div ішіндегілерді жасыл түске, ал үшінші div ішіндегілерді көк түске бояңыз. Ол үшін әрбір 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>
<div>
	<h2>Title</h2>
	<p>
		text
	</p>
	<p>
		text
	</p>
</div>

Бірінші және үшінші div ішіндегілерді қызыл түске, екінші және төртінші div ішіндегілерді жасыл түске бояңыз. Ол үшін бірінші және үшінші div-ге бір класс, ал екінші және төртінші div-ге басқа класс беріңіз.