CSS селектор по 'id'

Часто нужно стилизовать не все элементы одного типа, а только некоторые. Для этих целей в CSS существуют другие типы селекторов.

Селектор по id

Каждому HTML элементу мы можем добавить специальный атрибут id. Этот атрибут задаёт уникальный идентификатор элемента на странице. В качестве значения для этого атрибута можно использовать любое текстовое значение. Главное правило - значение id должно быть уникальным в пределах одного HTML-документа.

Атрибут id используется в трёх основных случаях:

1. Для CSS-стилизации конкретного элемента
2. Для навигации по странице (якоря)
3. Для работы с JavaScript

Использование для работы с JavaScript рассмотреим в соотеветствующем модуле, а сейчас давайте разберем первые два случая.

Использование id для навигации

id можно использовать для перехода к определённому месту на странице. Для этого необходимо задать id какому-либо блоку на странице, а затем использовать этот id в атрибуте href тега <a>. В результате на страницу будет добавлена сслыка, по клику на которую браузер прокрутит страницу к соответсвующему элементу.

Например, давайте рассмотрим следующий код:

<style>
  p {
    height: 2000px;
  }
</style>
<h2 id="contacts">Контакты</h2>
<p>Контактная информация</p>
<h2 id="other">Другая информация</h2>
<p>Другая информация</p>
<a href="#contacts">Перейти к контактам</a>
html

Обратите внимание что с помощью тега style всем параграфам задана высота 2000 пикселей, чтобы блоки заниманили много места и на странице появилась полоса прокрутки. В атрибуте href тега <a> необходимо добавить знак решетки # и имя id указанное в соответсвующем разделе, без пробела между ними.

Использование id для стилизации

Для обращения к id в CSS также используется символ решетки (#) и имя соотвесвующего идентификатора без пробела между ними. Давайте заиспользуем пример выше, но добавим стили для заголовка с id="other"

<style>
  p {
    height: 2000px;
  }

  #other {
    color: green;
  }
</style>
<h2 id="contacts">Контакты</h2>
<p>Контактная информация</p>
<h2 id="other">Другая информация</h2>
<p>Другая информация</p>
<a href="#contacts">Перейти к контактам</a>
html

Резюмироя можно сказать, что id идеально подходит для стилизации уникальных элементов страницы (header, main, footer), однако не подойдет для массовой стилизации большого количества элементов. Также следует помнить, что id должны быть уникальными.

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