Селекторы ID

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

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

Синтаксис

#id_value { style properties }

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

[id=id_value] { style properties }

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

Примеры

Допустимые селекторы ID

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;
}

Результат

Недопустимые селекторы ID

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

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

#123item {
  background-color: green;
}

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

Спецификация
Уровень 4 селекторов # id-selectors

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

	Рабочие столы					Мобильные устройства
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox для Android	Opera Android	Safari на IOS	Samsung Internet	WebView Android
`ID_selectors`	1	12	1	3.5	1	18	4	10.1	1	1.0	≤37

См. также

© 2005–2024 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/ID_selectors