Коротко: id — это уникальный «паспорт» одного элемента на странице. В CSS пишется через решётку: #header. Для оформления обычно используют классы, а id оставляют для якорей, форм и JavaScript.
id, чем он отличается от class, когда его брать и какие ошибки из‑за него возникают. Материал для начинающих, уже знакомых с селекторами.Что такое id
id — атрибут HTML, который помечает элемент уникальным именем. Это имя может встречаться на странице только один раз.
<div id="header">Шапка сайта</div>#header { background: #003F8F; }Правило простое: сколько раз встречается id — столько и уникальных элементов. Двух одинаковых id быть не должно.
Чем id отличается от class
| Признак | id | class |
|---|---|---|
| Уникальность | один на странице | сколько угодно |
| Селектор в CSS | #name |
.name |
| Специфичность | высокая | низкая |
| Можно несколько у элемента | нет | да |
| Для оформления | не рекомендуется | рекомендуется |
Вкладки: где применять
- Якоря:
<div id="faq">и ссылка#faq; - Связь поля и подписи:
<label for="email">; - Уникальные зоны: шапка, футер, контейнер приложения;
- Хуки для скриптов.
#menu a { color: red; } /* вес 100 + 1 */
.menu a { color: blue; } /* вес 10 + 1 */Правило с id побеждает даже если класс объявлен ниже. Поэтому стили «на id» трудно переопределять.
const el = document.getElementById('header');Быстрый доступ к уникальному элементу. Для групп элементов используйте классы и querySelectorAll.
Практика: три задачи
1. Якорная ссылка
- Добавьте элементу
id, напримерid="contacts". - Сделайте ссылку
<a href="#contacts">Контакты</a>. - Проверьте плавный переход (можно добавить
scroll-behavior: smooth).
2. Связь label и поля
<label for="email">Email</label>
<input id="email" type="email">Клик по подписи фокусирует поле — это важная мелочь удобства.
3. Уникальный контейнер
<div id="app">...</div>Но оформление лучше вешать на класс: <div id="app" class="app">.
id — для уникальности, якорей и связки с JavaScript. Так CSS остаётся предсказуемым.Частые ошибки: причина → решение
| Симптом | Причина | Решение |
|---|---|---|
| Класс «не перебивает» стиль | на элементе есть #id |
использовать класс вместо id |
| Якорь не работает | id не совпадает со ссылкой |
проверить написание |
| Стиль применился не к тому | два одинаковых id |
оставить один, второй — класс |
label не фокусирует поле |
нет for/id |
связать их |
Проверьте себя
id может встречаться на странице?
Вопросы и ответы
Да, но не рекомендуется: высокая специфичность усложняет поддержку. Предпочтительнее классы.
Нет, атрибут id — один. Для нескольких признаков есть классы.
Уникальностью: якоря, label for, быстрый доступ из JS. Для оформления преимуществ нет.
#id (вес 100) специфичнее класса (вес 10).
Итоги
idуникален и пишется как#name.- Оформление — классами.
idудобен для якорей, форм и JS.
Комментарии
Пока комментариев нет — будьте первым, кто поделится мнением.