Выбор элемента по уникальному id в CSS
Как вы уже знаете, классы предназначены,
чтобы присваивать их группе элементов. Кроме
классов, можно также выбирать элементы по
id, представляющим собой уникальный
идентификатор элемента. Под уникальностью
понимается то, что если у нас на странице
уже есть элемент с таким id, то другого
элемента с таким же id быть не должно.
Уникальный идентификатор задается с помощью
атрибута id, в котором пишется придуманное
нами имя. Давайте, например, сделаем два
блока. Первому зададим id в значении
block1, а второму - в значении
block2:
<div id="block1">
<p>text</p>
<p>text</p>
</div>
<div id="block2">
<p>text</p>
<p>text</p>
</div>
Чтобы обратиться к элементу с заданным id,
нужно написать символ # и придуманное
нами имя, вот так:
#block1 {
color: red;
}
#block2 {
color: green;
}
Атрибут id используется в том случае,
когда необходимо подчеркнуть уникальность
элемента. Классы используются тогда, когда
предполагается, что таких элементов может
быть много, даже если он сейчас один.
Дан следующий код:
<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>
Покрасьте содержимое блока elem1 в
красный цвет, блока elem2 - в зеленый,
а блока elem3 - в голубой.