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