Селектор идентификатора

Предыдущая статья Селектор класса.

Описание селектора:

• Выполняемая задача — выбор элемента по уникальному идентификатору (значению атрибута id).
• Обозначение — название идентификатора с предшествующим ему значком #.
• Пример использования:

Установим высоту элемента с идентификатором header (скорее всего — это шапка сайта) равной 200px.

#header {
	height: 200px;
} 

Подробнее про селектор идентификатора

У селектора идентификатора много общего с селектором класса. Он также позволяет задать стили какому-нибудь конкретному HTML-элементу (с определенным значением атрибута id).

Примеры

Не забудь позаботится, чтобы нужный атрибут существовал:

<ul>
	<li id="active">HTML и CSS приемы</li>
	<li>Обучение</li>
	<li>HTML справочник</li>
</ul>

/* зададим зеленый цвет текста в любом теге с id="active" */
#active {
	color: #0f0;
} 

Так же, как и в селекторе класса, универсальный селектор можно не указывать:

/* эти два правила одинаковы */
*#active {} 
#active {}

Комбинируя селектор идентификатора и селектор типа, можно объединить их свойства. Следующее правило сработает только для элемента списка с данным id:

li#active {
	color: #0f0;
}

В принципе, учитывая, что id на странице должен быть уникальным, смысла в таком комбинировании не много. Разве что, если ты хочешь гарантировать применение какого-нибудь id в строго определенных ситуациях (как в нашем примере — только в элементах списков).

Как и названия классов, идентификаторы являются регистрозависимыми — строчные и прописные буквы различаются.

Отличия между классами и id

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

Со сходством, вроде бы, понятно. И тот и другой селектор помогут в CSS «отличить» одни теги от других. Теперь про различия:

• Идентификатор должен быть уникальным в пределах HTML-страницы. То есть, предполагается, что селектор идентификатора выберет только один элемент. Надеюсь, помнишь, что один и тот же класс можно присваивать любому количеству элементов. Существенная оговорка — следить, чтобы id был действительно единственным придется тебе.
• Так как в атрибуте id не допустимо использовать несколько значений, то в отличие от множественных классов, множественных идентификаторов не бывает.
• При определении того, какие стили должны применяться к данному элементу идентификаторы имеют больший вес, чем классы. Подробнее этот вопрос будет рассмотрен в разделе, посвященном наследованию.

Область применения

С помощью скрипта очень удобно обращаться к элементу по его идентификатору. Поэтому, как правило, идентификаторы применяются там, где предполагается работа скриптов. Например, в формах или в каких-то динамических элементах. Так же с помощью id можно подчеркнуть уникальность элемента, его присутствие в единственном экземпляре.

В остальных случаях, обычно, используются классы.

Следующая статья — Селектор атрибутов.