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

Селектор ідентифікатора CSS дають збіг з елементом на основі значення атрибута id цього елемента. Щоб елемент був вибраний, його атрибут id повинен точно відповідати значенню, вказаному в селекторі.

/* Елемент з id="demo" */
#demo {
  border: red 2px solid;
}

Синтаксис

#id_value { style properties }

Зверніть увагу на те, що синтаксично (але не щодо специфічності) це рівносильно наступному селектору атрибута:

[id=id_value] { style properties }

Значення id_value мусить бути валідним ідентифікатором CSS. Атрибути HTML id, що не є валідними ідентифікаторами CSS, повинні бути екрановані для вжитку в селекторах ідентифікаторів.

Приклади

Валідні селектори ідентифікатора

HTML

<p id="blue">Цей абзац має блакитне тло.</p>
<p>Це просто звичайний абзац.</p>
<!-- Наступні два абзаци мають атрибути id,
що містять символи, які необхідно екранувати в CSS -->

<p id="item?one">Цей абзац має рожеве тло.</p>
<p id="123item">Цей абзац має жовте тло.</p>

CSS

#blue {
  background-color: skyblue;
}
/* У наступних двох правилах необхідно екранувати атрибути id */

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

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

Результат

Невалідні селектори ідентифікатора

Селектори ідентифікатора в наступних правилах не є валідними ідентифікаторами CSS, а тому ігноруються.

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

#123item {
  background-color: green;
}

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

Сумісність із браузерами

desktop mobile
Chrome Edge Firefox Internet Explorer Opera Safari WebView Android Chrome Android Firefox for Android Opera Android Safari on iOS Samsung Internet
ID selector (#idName)
Chrome Full support 1
Edge Full support 12
Firefox Full support 1
Internet Explorer Full support 3
Opera Full support 3.5
Safari Full support 1
WebView Android Full support 37
Chrome Android Full support 18
Firefox for Android Full support 4
Opera Android Full support 10.1
Safari on iOS Full support 1
Samsung Internet Full support 1.0

Дивіться також