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

Селектор идентификатора CSS выбирает элемент на основе значения его атрибута id. Чтобы элемент был выбран, значение его атрибута id должно точно совпадать со значением, указанным в селекторе.

/* The element with id="demo" */
#demo {
  border: red 2px solid;
}

Синтаксис

#id_value {
  /* … */
}

Обратите внимание, что с точки зрения синтаксиса (но не специфичности) это эквивалентно следующему селектору атрибута:

[id="id_value"] {
  /* … */
}

Значение id_value должно быть допустимым идентификатором CSS. Значения атрибута id в HTML, которые не являются допустимыми идентификаторами CSS, необходимо экранировать, прежде чем использовать их в селекторах идентификатора.

Примеры

Допустимые селекторы идентификатора

HTML

<p id="blue">This paragraph has a blue background.</p>
<p>This is just a regular paragraph.</p>

<!-- The next two paragraphs have id attributes
that contain characters which must be escaped in CSS -->

<p id="item?one">This paragraph has a pink background.</p>
<p id="123item">This paragraph has a yellow background.</p>

CSS

#blue {
  background-color: skyblue;
}

/* In the next two rules, the id attributes must be escaped */

#item\?one {
  background-color: pink;
}

#\00003123item {
  background-color: yellow;
}

Результат

Недопустимые селекторы идентификатора

Селекторы идентификатора в следующих правилах не являются допустимыми идентификаторами CSS, поэтому будут проигнорированы.

#item?one {
  background-color: green;
}

#123item {
  background-color: green;
}

Спецификации

Совместимость с браузерами

См. также

• Селекторы CSS
• Изучаем CSS: базовые селекторы