Выбор элемента по уникальному id на CSS

Как вы уже знаете, классы предназначены, чтобы присваивать их группе элементов. Кроме классов, можно также выбирать элементы по id, представляющим собой уникальный идентификатор элемента. Под уникальностью понимается то, что если у нас на странице уже есть элемент с таким id, то другого элемента с таким же id быть не должно.

Уникальный идентификатор задается с помощью атрибута id, в котором пишется придуманное нами имя. Давайте, например, сделаем два блока. Первому зададим id в значении block1, а второму - в значении block2:

<div id="block1">
	<p>текст</p>
	<p>текст</p>
</div>
<div id="block2">
	<p>текст</p>
	<p>текст</p>
</div>

Чтобы обратиться к элементу с заданным id, нужно написать символ # и придуманное нами имя, вот так:

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

Дан следующий код:

<div id="elem1">
	<h2>заголовок</h2>
	<p>
		текст
	</p>
	<p>
		текст
	</p>
</div>
<div id="elem2">
	<h2>заголовок</h2>
	<p>
		текст
	</p>
	<p>
		текст
	</p>
</div>
<div id="elem3">
	<h2>заголовок</h2>
	<p>
		текст
	</p>
	<p>
		текст
	</p>
</div>

Покрасьте содержимое блока elem1 в красный цвет, блока elem2 - в зеленый, а блока elem3 - в голубой.

Замечание

Одному элементу можно задавать и id, и классы. В этом случае часть стилей элемента можно задать через id, а часть стилей - через класс:

<div id="block" class="large">
	<p>текст</p>
	<p>текст</p>
</div>

#block {
	color: red;
	font-family: Arial;
}
.large {
	font-size: 30px;
}

Когда использовать id, когда классы?

Атрибут id используется в том случае, когда необходимо подчеркнуть уникальность элемента. Классы используются тогда, когда предполагается, что таких элементов может быть много, даже если он сейчас один.