4.5. Селектор ID

Селектор ID (от англ. identificator) позволяет задавать стили для тега с соответствующим id. У каждого тега языка HTML имеется атрибут id, задающий его уникальный идентификатор в HTML-странице. То есть, в отличии от атрибута class, значение атрибута id не может повторяться для нескольких тегов в пределах одного документа. Если же это происходит, то браузер, как правило, оставляет один последний неуникальный идентификатор. Следующий пример демонстрирует использование атрибута id внутри тегов:

<div id="main">
     <p id="title">Заголовок</p>
     <p id="text">Текст</p>
</div>

Обычно идентификаторы служат для манипулирования содержимым тегов, например, для передачи данных серверу, или при обработке содержимого тегов с помощью JavaScript-сценариев. Однако, используя идентификаторы тегов также можно определить для них свойства в таблице стилей. Это выполняется также как и для классов, только перед именем стиля идентификатора ставится символ #:

#main {
     padding: 10px;
     border: 1px solid #000;
}
p#title {
     font-size: 18px;
}
p#text {
     font-size: 14px;
}

Обратите внимание, что перед именем двух последних идентификаторов стоят теги p. Это означает, что стиль для идентификатора title будет применен браузером только тогда, когда он определен в теге <p>. Аналогично и для идентификатора text.

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