Классы и id: как обратиться к элементу

Урок 1.6 · Интерфейсы и сайты с нуля · Модуль 1. Первые шаги в интерфейсе · Бесплатно

Цель урока: Понять разницу между классом и id и научиться выбирать элементы в CSS.

Нужно знать заранее: Урок 1.5

Объяснение

Зачем это нужно: Пока элементов мало, можно оформлять их по тегу: все кнопки — синие. Но как только кнопок становится две разные, тег не помогает. Нужны имена: классы и id. Они позволяют обратиться к конкретному блоку и не задеть остальные.

Как это работает: Класс — имя для группы элементов. В HTML: <div class="card">. В CSS: .card { … } — точка означает «класс». Один класс можно повесить на много элементов, и все они получат одинаковое оформление. У элемента может быть несколько классов: class="card card--big". id — уникальное имя для одного элемента. В HTML: <h1 id="main-title">. В CSS: #main-title { … } — решётка означает «id». На странице не должно быть двух одинаковых id. Правило выбора: если элементов несколько и они похожи — класс. Если элемент один и на него ссылаются — id.

Пример с разбором: <style> .card { background: #eef2ff; padding: 16px; border-radius: 12px; } #main-title { color: #4f46e5; } </style> <h1 id="main-title">Мои карточки</h1> <div class="card">Первая</div> <div class="card">Вторая</div> Все карточки получили одинаковый фон и отступы, а заголовок — свой цвет.

Разбор по шагам: 1. Придумайте имя по смыслу: card, note, menu, hero. 2. Поставьте его в HTML: class="card" или id="main-title". 3. В CSS напишите селектор: .card или #main-title. 4. Проверьте, что стиль применился только к нужным элементам.

Частая ошибка: Забыть точку перед классом. Селектор note ищет тег <note>, которого не существует, и правило молча не работает. Забыть решётку перед id — то же самое. Ещё одна ошибка — одинаковые id на странице: браузер найдёт первый, остальные останутся без стилей.

Важно: Имена пишите латиницей, без пробелов, по смыслу: .card, .menu, .hero. Не называйте классы цветом (.red) — завтра цвет поменяется, а имя останется. Специфичность: id сильнее класса, класс сильнее тега. Поэтому id лучше держать для единичных элементов.

Проверь себя: Как в CSS выбрать класс card? .card. Как выбрать id main-title? #main-title. Можно ли повесить один класс на несколько элементов? Да. Сколько id может быть на странице? Сколько угодно, но каждый уникален.

Итог: Класс — для группы, id — для одного. Точка и решётка — не украшение, а часть селектора: без них правило не сработает.

Что дальше: В уроке 1.7 — мини-проект: страница-визитка из всего, что вы уже умеете.

<style>
  .card {
    background: #eef2ff;
    padding: 16px;
    border-radius: 12px;
  }
  #main-title {
    color: #4f46e5;
  }
</style>
<h1 id="main-title">Мои карточки</h1>
<div class="card">Первая</div>
<div class="card">Вторая</div>

Уроки модуля 1

• 1.1 Что такое интерфейс и из чего он собран (бесплатно)
• 1.2 Первая страница: заголовок и текст (бесплатно)
• 1.3 Кнопка, на которую хочется нажать (бесплатно)
• 1.4 Ссылка, картинка и список (бесплатно)
• 1.5 Структура страницы: шапка, main и подвал (бесплатно)
• 1.6 Классы и id: как обратиться к элементу — вы здесь (бесплатно)
• 1.7 Мини-проект: страница-визитка (бесплатно)
• 1.8 Разбор первой страницы: что поправить (бесплатно)