Селектор - это часть CSS-правила перед фигурными скобками: она говорит браузеру, к каким именно элементам применить стиль. Три базовых способа выбрать элемент - по названию тега, по классу (атрибут class) и по id (атрибут id). У каждого своя область действия: тег красит всех сразу, класс - группу похожих элементов, id - один конкретный.
В этом уроке
Попробуй прямо в этом окне: у всех трёх абзацев тег одинаковый - p, но выглядят они по-разному, потому что к ним по очереди подключаются более сильные селекторы. Третий абзац стал tomato, хотя под него подходят все три правила сразу - почему победил именно id, разберём подробно в отдельном уроке про каскад и специфичность, а пока запомним сам факт: id сильнее класса, класс сильнее тега.
Селектор по тегу
Самый простой селектор - это просто название тега без всяких значков: p, h1, a. В спецификации CSS его называют «селектор типа», но в обычной речи чаще говорят «селектор по тегу» - это одно и то же. Такой селектор выбирает вообще все элементы этого тега на странице, где бы они ни находились.
p { color: tomato; } - все абзацы на странице станут tomato.
Ожидание, что p { color: tomato; } покрасит только «тот самый» один абзац - на деле правило применится к каждому <p> на странице, включая те, что появятся в других местах документа.
Селектор по классу
Селектор по классу пишут с точкой перед именем: .note. Он выбирает все элементы, у которых в HTML-атрибуте class указано это имя - неважно, какой у них тег. Один и тот же класс можно повесить на сколько угодно разных элементов, а у одного элемента может быть сразу несколько классов через пробел: class="note important".
<p class="note">Текст</p> и правило .note { color: dodgerblue; } - сработает для любого тега с этим классом.
<p class=".note">Текст</p> - точку по ошибке поставили прямо в HTML-атрибуте; браузер ищет класс с именем «.note» (вместе с точкой), а не «note», поэтому селектор .note такой элемент не найдёт. Точка нужна только в CSS-селекторе, в самом атрибуте class пишут просто имя без точки.
Селектор по id
Селектор по id пишут с решёткой перед именем: #intro. По правилам HTML значение id должно быть уникальным на странице - то есть у каждого элемента свой, не повторяющийся id, в отличие от класса, который специально придуман для переиспользования на многих элементах.
<p id="intro">Текст</p> и правило #intro { color: tomato; } - обращение к одному конкретному элементу.
<p id="intro">Первый</p>
<p id="intro">Второй</p> - id повторили на двух элементах. CSS-правило по #intro всё равно покрасит оба (браузер не откажется применять стиль), но с точки зрения HTML это невалидная разметка, и другие инструменты - например, JavaScript-метод getElementById - будут видеть только первый такой элемент.
H1 { color: blue } для тега, .pastoral { color: green } для класса и #z98y { letter-spacing: 0.3em } для id. За тридцать лет сам синтаксис этих трёх селекторов не изменился ни на символ. Источник: w3.org - спецификация CSS1, 1996.
Частые ошибки новичков
| Ошибка | Что происходит | Как исправить |
|---|---|---|
| Ждать, что селектор по тегу затронет только один элемент | Селектор по тегу красит вообще все элементы этого тега на странице | Использовать класс или id, если нужен только один или несколько конкретных элементов |
| Ставить точку внутри самого атрибута class в HTML, например class=".note" | Браузер ищет класс с именем ".note" вместе с точкой, а не "note" - селектор .note такой элемент не найдёт | Точку писать только в CSS-селекторе; в HTML-атрибуте class - только имя, без точки |
| Дублировать один и тот же id на нескольких элементах страницы | CSS-правило по этому id всё равно применится ко всем совпадающим элементам, но это невалидный HTML, а JavaScript и другие инструменты увидят только первый из них | Давать каждому id уникальное значение; для повторяющегося оформления использовать class |
| Путать # в CSS-селекторе с # в адресе ссылки вроде #faq | Это разные вещи: в CSS # выбирает элемент по id для стилей, а в ссылке # прокручивает страницу к элементу с таким же id - хотя оба и правда завязаны на один и тот же атрибут id | Помнить, что это два разных применения одного и того же id, а не одна и та же функция |
Шпаргалка
| Термин | Значение |
|---|---|
| Селектор | Часть правила перед { } - определяет, к каким элементам применится стиль |
| Селектор по тегу | Просто имя тега, например p - выбирает все элементы с этим тегом |
| Селектор по классу | Точка перед именем класса, например .note - выбирает все элементы с этим классом |
| Селектор по id | Решётка перед именем id, например #intro - выбирает один элемент с этим id |
| Приоритет | id сильнее класса, класс сильнее тега - подробно про специфичность будет отдельный урок |
Коротко: отвечаем на вопросы
Может ли элемент иметь сразу несколько классов?
Да, классы просто перечисляют через пробел в одном атрибуте: class="note important". Элемент получит стили от обоих классов сразу.
Обязательно ли на странице должен быть хотя бы один id?
Нет, id нужен не всегда - только когда действительно нужно обратиться к одному конкретному элементу, например для стилей, скрипта или ссылки-якоря вида #faq.
Что сильнее при конфликте правил - класс или id?
Id сильнее класса, а класс сильнее обычного селектора по тегу. Это часть более широкой темы под названием специфичность - ей будет посвящён отдельный урок в этой же группе.
Можно ли использовать одинаковое имя для класса и для id на одной странице?
Технически да - class="note" и id="note" не конфликтуют друг с другом, потому что это разные атрибуты. Но лучше так не делать: путаница в коде почти гарантирована, когда потом придётся вспоминать, какой из селекторов - .note или #note - использован в конкретном правиле.
