แท็ก div สำหรับการจัดกลุ่มแท็กใน HTML

ในบทเรียนที่ผ่านมาเราได้วิเคราะห์แท็ก span ซึ่งช่วยให้สามารถเน้นบางส่วนของ ข้อความได้ มีแท็กพิเศษอีกอันหนึ่งคือ div ซึ่งช่วยให้สามารถจัดกลุ่ม แท็กหลายๆ อันเข้าด้วยกันได้ เพื่อที่จะทำอะไร กับพวกมันพร้อมกันในภายหลัง

ตัวอย่างเช่น ด้วยการใช้แท็ก div เราจะจัดกลุ่มย่อหน้า:

<div class="block1">
	<p>
		ข้อความ
	</p>
	<p>
		ข้อความ
	</p>
</div>
<div class="block2">
	<p>
		ข้อความ
	</p>
	<p>
		ข้อความ
	</p>
</div>

ลองกำหนดสีแดงให้กับองค์ประกอบจากกลุ่มแรก และกำหนดสีเขียวให้กับองค์ประกอบจากกลุ่มที่สอง

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

ให้โค้ดต่อไปนี้:

<div>
	<h2>หัวเรื่อง</h2>
	<p>
		ข้อความ
	</p>
	<p>
		ข้อความ
	</p>
</div>
<div>
	<h2>หัวเรื่อง</h2>
	<p>
		ข้อความ
	</p>
	<p>
		ข้อความ
	</p>
	<p>
		ข้อความ
	</p>
</div>
<div>
	<h2>หัวเรื่อง</h2>
	<p>
		ข้อความ
	</p>
	<p>
		ข้อความ
	</p>
	<p>
		ข้อความ
	</p>
	<p>
		ข้อความ
	</p>
</div>

จงให้สีแดงกับเนื้อหาภายใน div แรก ให้สีเขียวกับเนื้อหาภายใน div ที่สอง และให้สีฟ้ากับเนื้อหาภายใน div ที่สาม โดยกำหนด คลาสให้กับแต่ละ div

ให้โค้ดต่อไปนี้:

<div>
	<h2>หัวเรื่อง</h2>
	<p>
		ข้อความ
	</p>
	<p>
		ข้อความ
	</p>
</div>
<div>
	<h2>หัวเรื่อง</h2>
	<p>
		ข้อความ
	</p>
	<p>
		ข้อความ
	</p>
</div>
<div>
	<h2>หัวเรื่อง</h2>
	<p>
		ข้อความ
	</p>
	<p>
		ข้อความ
	</p>
</div>
<div>
	<h2>หัวเรื่อง</h2>
	<p>
		ข้อความ
	</p>
	<p>
		ข้อความ
	</p>
</div>

จงให้สีแดงกับเนื้อหาของ div แรกและ div ที่สาม ให้สีเขียวกับเนื้อหาของ div ที่สองและ div ที่สี่ โดยกำหนดคลาสเดียวกันให้กับ div แรก และ div ที่สาม และกำหนดอีกคลาสหนึ่งให้กับ div ที่สอง และ div ที่สี่