Селектор

Таблица стилей отделена от разметки, и селектор — мост между ними. Браузер берёт каждый элемент страницы и проверяет, какие селекторы ему подходят. Тот же синтаксис используется вне CSS: в JavaScript через querySelector, в тестах интерфейса, в парсерах страниц, в настройках целей аналитики по клику.

Интересная деталь: браузер сопоставляет сложный селектор справа налево. Для .catalog .item a он сначала находит все ссылки, а потом проверяет их предков. Поэтому самая правая часть селектора — самая важная для скорости, хотя на обычных сайтах разница редко заметна.

Из чего собирают селекторы

• Простые: тег p, класс .button, идентификатор #header, атрибут [type="email"], универсальный *.
• Состояния и структура: псевдоклассы :hover, :focus-visible, :nth-child(2n), :not(), :has().
• Части элемента: псевдоэлементы ::before, ::placeholder, ::first-line.
• Отношения: пробел (потомок), > (прямой ребёнок), + и ~ (соседи) — это комбинаторы.

Пример

/* Поля с ошибкой внутри формы заказа */
.order-form input:invalid { border-color: #c62828; }

/* Внешние ссылки в тексте статьи */
.article a[href^="http"]:not([href*="example.ru"]) { text-decoration-style: dotted; }

/* То же в JavaScript */
document.querySelectorAll('.order-form input:invalid');

Как писать поддерживаемые селекторы

• Опираться на классы, а не на идентификаторы и длинные цепочки тегов. .card-title переживёт переделку разметки, div > div > h3 — нет.
• Не вкладывать глубже двух-трёх уровней. Длинный селектор сложно перебить, и начинается гонка, о которой — в статье про специфичность.
• Не привязывать JavaScript к классам оформления. Для скриптов удобнее отдельные классы с префиксом js- или data-атрибуты: дизайнер поменяет класс — скрипт не сломается.