CSS-селекторы

CSS-селекторы — это шаблоны, используемые в языке каскадных таблиц стилей (CSS) для выбора элементов HTML-документа, к которым будут применены определённые стилевые правила. Селекторы определяют, какие именно элементы на веб-странице должны быть стилизованы, и являются основой для связывания структуры документа (HTML) с его визуальным представлением (CSS). Без селекторов невозможно задать стили для конкретных частей страницы, что делает их ключевым инструментом веб-разработки.

Типы селекторов

CSS предоставляет несколько типов селекторов, которые различаются по способу указания целевых элементов. Выбор конкретного типа зависит от структуры HTML-документа, семантики элементов и требуемой точности стилизации.

Базовые селекторы

К базовым относятся селекторы, которые выбирают элементы по их типу, классу, идентификатору или универсально.

• Селектор по типу (тегу) — выбирает все элементы с указанным HTML-тегом. Например, селектор p применяет стили ко всем абзацам <p> на странице. Это самый простой и широко используемый тип.
• Селектор по классу — выбирает элементы, имеющие в атрибуте class указанное значение. В CSS обозначается точкой перед именем класса (например, .highlight). Один и тот же класс может быть присвоен нескольким элементам, что позволяет группировать их для единообразной стилизации.
• Селектор по идентификатору — выбирает элемент с конкретным значением атрибута id. В CSS обозначается решёткой (#) перед именем идентификатора (например, #header). Идентификатор должен быть уникальным в пределах одной страницы, поэтому данный селектор применяется для стилизации единственного элемента.
• Универсальный селектор — обозначается звёздочкой (*). Он выбирает все элементы документа. Используется редко, так как может привести к избыточному применению стилей, но иногда применяется для сброса стандартных отступов или задания общих правил для всех элементов.

Комбинаторы

Комбинаторы позволяют связывать несколько простых селекторов, описывая отношения между элементами в дереве DOM.

• Комбинатор потомка (пробел) — выбирает элементы, являющиеся потомками (на любом уровне вложенности) указанного родителя. Например, div p выберет все абзацы, находящиеся внутри любого элемента <div>, независимо от глубины вложенности.
• Комбинатор дочернего элемента (>) — выбирает элементы, являющиеся прямыми дочерними элементами указанного родителя. Например, ul > li выберет только те элементы списка <li>, которые непосредственно вложены в <ul>, игнорируя вложенные списки.
• Комбинатор соседнего элемента (+) — выбирает элемент, который непосредственно следует за указанным элементом и имеет общего родителя. Например, h2 + p выберет первый абзац, идущий сразу после заголовка <h2>.
• Комбинатор общих соседних элементов (~) — выбирает все элементы, которые следуют за указанным элементом и имеют общего родителя. Например, h2 ~ p выберет все абзацы, расположенные после заголовка <h2> внутри одного родительского контейнера.

Псевдоклассы и псевдоэлементы

Эти типы селекторов позволяют выбирать элементы на основе их состояния или определённых частей, не отражённых в HTML-разметке.

• Псевдоклассы — определяют динамическое состояние элемента (например, :hover — состояние при наведении курсора, :focus — состояние фокуса, :first-child — первый дочерний элемент родителя). Они начинаются с двоеточия (:). Псевдоклассы широко используются для создания интерактивных эффектов, таких как изменение цвета кнопки при наведении.
• Псевдоэлементы — позволяют стилизовать определённые части элемента (например, ::first-line — первая строка текста, ::before — содержимое, вставляемое перед элементом). Они начинаются с двойного двоеточия (::). Псевдоэлементы часто применяются для декоративных целей, таких как добавление иконок или кавычек без изменения HTML-кода.

Селекторы атрибутов

Эти селекторы выбирают элементы на основе наличия или значения их атрибутов. Они заключаются в квадратные скобки ([]). Существует несколько вариантов:

• [attr] — выбирает элементы, имеющие атрибут attr, независимо от его значения.
• [attr="value"] — выбирает элементы с точным значением атрибута value.
• [attr~="value"] — выбирает элементы, значение атрибута которых содержит слово value в списке слов, разделённых пробелами.
• [attr^="value"] — выбирает элементы, значение атрибута которых начинается с value.
• [attr$="value"] — выбирает элементы, значение атрибута которых заканчивается на value.
• [attr*="value"] — выбирает элементы, значение атрибута которых содержит подстроку value.

Селекторы атрибутов удобны для стилизации элементов форм (input[type="text"]), ссылок с определёнными протоколами (a[href^="https"]) или элементов с произвольными атрибутами данных (data-*).

Специфичность селекторов

Специфичность — это механизм, определяющий, какое из нескольких конкурирующих CSS-правил будет применено к элементу, если они имеют одинаковую важность. Она вычисляется на основе типов селекторов, входящих в правило.

Специфичность выражается в виде четырёх чисел (a, b, c, d), где:

• a — наличие объявления style (встроенного стиля в HTML-атрибуте). Такие стили имеют наивысший приоритет.
• b — количество селекторов по идентификатору (#id).
• c — количество селекторов по классу, атрибуту и псевдоклассов (.class, [attr], :hover).
• d — количество селекторов по типу и псевдоэлементов (p, ::before).

Универсальный селектор (*) и комбинаторы (+, >, ~, пробел) не влияют на специфичность. Чем выше значение в старшем разряде (a, затем b, затем c), тем выше приоритет правила. При равенстве специфичности применяется правило, объявленное позже в таблице стилей.

Применение CSS-селекторов

CSS-селекторы используются в любом проекте, связанном с веб-разработкой. Они позволяют:

• Создавать адаптивный дизайн — с помощью медиа-запросов и псевдоклассов (:nth-child, :not()) можно изменять стили в зависимости от размера экрана или состояния элементов.
• Управлять сложными макетами — комбинаторы и селекторы атрибутов упрощают стилизацию элементов в сетках, таблицах и списках.
• Реализовывать интерактивность — псевдоклассы :hover, :focus, :active позволяют создавать визуальные отклики на действия пользователя без использования JavaScript.
• Оптимизировать код — правильное использование селекторов уменьшает объём CSS-файла и упрощает его поддержку. Например, использование классов вместо идентификаторов для повторяющихся элементов.

Примеры использования

Ниже приведены несколько примеров CSS-селекторов и их применения:

• a.external — выберет все ссылки с классом external.
• div > p:first-child — выберет первый абзац, являющийся прямым дочерним элементом любого <div>.
• input[type="email"]:invalid — выберет поля ввода email с невалидным значением.
• li:nth-child(odd) — выберет все нечётные элементы списка.
• p::first-letter — выберет первую букву каждого абзаца.

Критика и ограничения

Несмотря на широкое распространение, CSS-селекторы имеют определённые ограничения. Основные из них:

• Отсутствие возможности выбора родительского элемента — CSS не позволяет выбрать элемент на основе его дочерних элементов или предшественников. Это ограничение делает некоторые задачи (например, изменение стиля родителя при наведении на дочерний элемент) невозможными без использования JavaScript.
• Сложность управления специфичностью — в больших проектах с множеством стилей может возникнуть «война специфичностей», когда для переопределения стилей приходится использовать всё более специфичные селекторы, что усложняет код.
• Производительность — чрезмерно сложные селекторы (например, div > ul > li > a) могут замедлять рендеринг страницы, особенно на старых браузерах или мобильных устройствах. Современные браузеры, однако, хорошо оптимизируют такие запросы.

Источники

• Спецификация CSS Selectors Level 3 (W3C Recommendation)
• Спецификация CSS Selectors Level 4 (W3C Working Draft)
• MDN Web Docs: CSS Selectors
• «CSS: The Definitive Guide» by Eric A. Meyer and Estelle Weyl