#18. Селекторы CSS: по тегу, по class и по id

В уроке #17 наши правила выглядели так: h1 { ... }, p { ... } — и действовали на все заголовки и все абзацы страницы. А если оформить нужно не все абзацы, а один конкретный? Или небольшую группу? За выбор «кого красить» отвечает селектор — часть правила перед фигурными скобками. Сегодня изучим три главных селектора: по тегу, по классу и по id. Атрибуты class и id мы завели заранее в уроке #14 — теперь они наконец пригодятся.

Селектор по тегу

Знакомый по прошлому уроку вариант: селектор — просто имя тега. Правило применяется ко всем таким тегам страницы:

a {
    color: green;
}

Теперь все ссылки на странице зелёные — без единой правки в HTML. Ограничение видно сразу: селектор по тегу работает по принципу «всё или ничего». Разделить абзацы нельзя: либо все p, либо никак.

Селектор по классу

Класс — «ярлык», который мы сами вешаем на элементы атрибутом class. Ярлык один, а элементов с ним — сколько угодно. В CSS класс записывается точкой и именем:

<p class="lead">Вводный абзац статьи.</p>
<p>Обычный абзац.</p>
<p class="lead">И ещё один вводный абзац.</p>

.lead {
    color: orange;
    font-size: 22px;
}

Оформятся первый и третий абзацы — те, что помечены классом; второй останется прежним. HTML при этом не трогаем: весь выбор, кому применять стили, живёт в css.

У одного элемента может быть несколько классов — они перечисляются через пробел: <p class="lead big"> означает, что элементу назначены сразу два класса, lead и big, и правила обоих применяются к нему вместе. Имена классам вы придумываете сами — коротко и по смыслу: lead, menu, article-text.

Селектор по id

У идентификатора работа та же, но правило другое: id — «имя собственное» и должен встречаться на странице один раз (два одинаковых id — ошибка, её ловит валидатор из урока #15). В CSS идентификатор записывается решёткой:

<h1 id="main-title">Мой блог</h1>

#main-title {
    color: red;
    font-size: 60px;
}

С id мы уже встречались в уроке #7: якоря вида <a href="#part2"> ищут элемент именно по идентификатору. Одна и та же метка служит и ссылкам, и стилям.

Класс или id?

Сведём три селектора вместе:

Практическое правило: класс — для групп элементов, id — для единственного. В реальной вёрстке почти всё оформляют классами — их можно свободно переиспользовать, — а id чаще берегут для якорей и уникальных элементов вроде шапки страницы.

Частые ошибки

• забыть точку: правило lead { ... } — это селектор по тегу <lead>, которого не существует; класс пишется как .lead;
• забыть решётку у идентификатора: main-title вместо #main-title;
• регистр важен: .Lead и .lead — разные классы; привычка писать всё маленькими буквами избавит от трудновидимых ошибок;
• два одинаковых id на странице — валидатор из урока #15 укажет на ошибку.

Практика

Продолжите страницу из практики урока #17 — ту, где стили уже живут в styles.css. Повесьте на два абзаца класс lead и опишите его: цвет и размер на ваш выбор. Заголовку дайте id="main-title" и оформите через #main-title. Затем проверьте себя «от обратного»: уберите точку у селектора класса и убедитесь, что оформление молча пропало (CSS не ругается на незнакомые правила — вспомните опечатку из урока #16); добавьте второй элемент с тем же id и прогоните страницу валидатором.

Селекторы по тегу, классу и id закрывают большинство повседневных задач вёрстки. Мы уже красили текст словами red, gray, orange — но английских слов-цветов мало, а в реальных дизайн-макетах цвета приходят записями вида #ff6600 и rgb(255, 0, 0). Что они значат и как красить не только текст, но и фон, — тема следующего урока.