Selecting an element by unique id in CSS

As you already know, classes are intended to be assigned to a group of elements. In addition to classes, you can also select elements by id, which is a unique identifier for the element. Uniqueness means that if we already have an element with such id on the page, then there should not be another element with the same id.

A unique identifier is specified using the id attribute, which contains a name we have come up with. Let's make two blocks, for example. We'll set the first one to id in the value block1, and the second one to block2:

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

To access an element with a given id, we need to write the symbol # and the name we came up with, like this:

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

The id attribute is used when it is necessary to emphasize the uniqueness of an element. Classes are used when it is assumed that there may be many such elements, even if there is only one at the moment.

The following code is given:

<div id="elem1">
	<h2>Title</h2>
	<p>
		text
	</p>
	<p>
		text
	</p>
</div>
<div id="elem2">
	<h2>Title</h2>
	<p>
		text
	</p>
	<p>
		text
	</p>
</div>
<div id="elem3">
	<h2>Title</h2>
	<p>
		text
	</p>
	<p>
		text
	</p>
</div>

Color the contents of the elem1 block red, the elem2 block green, and the elem3 block blue.