Вибір елемента за унікальним 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 використовується в тому випадку, коли необхідно наголосити на унікальності елементу. Класи використовуються тоді, коли передбачається, що таких елементів може бути багато, навіть якщо він зараз один.