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

Селектор ідентифікатора 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;
}

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

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

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

• Селектори CSS
• Вивчаймо CSS – Селектори