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

←→
↑