Модуль Selectors Level 4

Модуль Selectors Level 4 — это спецификация Консорциума Всемирной паутины (W3C), определяющая синтаксис и семантику селекторов CSS (каскадных таблиц стилей) четвёртого уровня. Селекторы представляют собой шаблоны, используемые для выбора элементов HTML-документа, к которым применяются определённые стилевые правила. Спецификация Selectors Level 4 (часто обозначаемая как CSS Selectors 4) расширяет возможности предыдущей версии (Selectors Level 3), добавляя новые псевдоклассы, псевдоэлементы и модификаторы, а также уточняя поведение существующих. На момент подготовки статьи (2024 год) спецификация находилась в статусе Кандидата в рекомендации (Candidate Recommendation), что означает относительную стабильность, но возможные изменения перед финальной публикацией.

История и развитие

Разработка селекторов CSS началась с первых версий спецификации CSS (CSS1), где были определены простые селекторы по типу элемента, классу и идентификатору. В CSS2.1 селекторы были расширены, появились псевдоклассы (:hover, :first-child) и псевдоэлементы (::before, ::after). Модуль Selectors Level 3, опубликованный в 2011 году, стал первой самостоятельной рекомендацией W3C по селекторам, включив в себя все существовавшие на тот момент селекторы и добавив новые, такие как :nth-child() и :not().

Работа над Selectors Level 4 началась вскоре после выхода третьего уровня. Основной целью было устранение ограничений предыдущих версий, особенно в области выбора элементов на основе их содержимого, взаимного расположения и состояния. Проект спецификации впервые был опубликован в 2013 году. В последующие годы он претерпел значительные изменения: некоторые предложения были отложены или удалены, другие — добавлены. Ключевым этапом стал переход в статус Кандидата в рекомендации в 2022 году, что сигнализирует о завершении основной разработки и начале сбора отзывов от сообщества разработчиков и производителей браузеров.

Классификация селекторов в Selectors Level 4

Спецификация сохраняет иерархию, введённую в предыдущих версиях, но добавляет новые категории.

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

К ним относятся:

• Селектор по типу (Type selector): div, p, span — выбирает элементы по имени тега.
• Селектор по классу (Class selector): .classname — выбирает элементы по значению атрибута class.
• Селектор по идентификатору (ID selector): #idname — выбирает элемент по значению атрибута id.
• Универсальный селектор (Universal selector): * — выбирает все элементы.

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

Они позволяют выбирать элементы на основе наличия или значения атрибутов. В Level 4 были уточнены и дополнены существующие операторы (например, [attr~=value], [attr|=value], [attr^=value], [attr$=value], [attr*=value]), а также добавлен регистронезависимый модификатор i (или I). Например, [attr$=".pdf" i] выберет элементы, у которых значение атрибута attr оканчивается на .pdf, .PDF, .Pdf и т.д.

Псевдоклассы

Псевдоклассы — это ключевые слова, добавляемые к селекторам, которые определяют особое состояние элемента. В Level 4 введено несколько новых категорий.

Псевдоклассы, связанные с вводом (Input Pseudo-classes)

Эти псевдоклассы предназначены для работы с элементами форм. В Level 4 они были значительно расширены:

• :enabled и :disabled — выбирают включённые или отключённые элементы.
• :read-only и :read-write — выбирают элементы, доступные только для чтения или для записи.
• :placeholder-shown — выбирает элементы <input> или <textarea>, в которых в данный момент отображается текст-заполнитель (placeholder).
• :default — выбирает элемент формы, который является значением по умолчанию в группе (например, радио-кнопка, выбранная по умолчанию).
• :indeterminate — выбирает элементы, находящиеся в неопределённом состоянии (например, флажок, который не отмечен и не снят, или прогресс-бар без значения).
• :valid и :invalid — выбирают элементы, значения которых прошли или не прошли валидацию, заданную атрибутами type, pattern, required и т.д.
• :in-range и :out-of-range — выбирают элементы, значения которых находятся в пределах или вне пределов, заданных атрибутами min и max.
• :required и :optional — выбирают обязательные или необязательные для заполнения элементы.
• :user-invalid — более строгий аналог :invalid, который срабатывает только после того, как пользователь явно взаимодействовал с элементом (например, после отправки формы или после того, как поле потеряло фокус). Это позволяет избежать отображения ошибок валидации до того, как пользователь начал ввод.

Псевдоклассы, связанные с расположением в дереве (Tree-Structural Pseudo-classes)

Эти псевдоклассы выбирают элементы на основе их положения в DOM-дереве. В Level 4 были добавлены новые возможности:

• :nth-child(An+B [of S]?) — ключевое нововведение. Теперь в :nth-child() можно передать не только формулу An+B, но и необязательный селектор S. Например, :nth-child(2 of .highlight) выберет второй элемент с классом .highlight среди всех своих соседей, а не второй дочерний элемент вообще. Это решает давнюю проблему выбора элементов по шаблону среди подмножества.
• :nth-last-child(An+B [of S]?) — аналог :nth-child, но счёт ведётся с конца.
• :first-child и :last-child — остаются без изменений.
• :only-child — выбирает элемент, если он является единственным дочерним элементом своего родителя.
• :nth-of-type(An+B) — выбирает An+B-й элемент определённого типа среди его соседей.
• :nth-last-of-type(An+B) — аналог :nth-of-type, но счёт ведётся с конца.
• :first-of-type и :last-of-type — выбирают первый или последний элемент определённого типа.
• :only-of-type — выбирает элемент, если он является единственным элементом своего типа среди соседей.

Псевдоклассы, связанные с содержимым и пользовательским интерфейсом (UI and Content Pseudo-classes)

• :empty — выбирает элементы, не имеющие дочерних узлов (включая текстовые узлы). В Level 4 уточнено, что пробельные символы не считаются содержимым, поэтому <div> </div> будет соответствовать :empty.
• :blank — выбирает элементы, которые не имеют содержимого или содержат только пробельные символы. Это более строгий аналог :empty.
• :focus-within — выбирает элемент, если он сам или любой из его потомков находится в фокусе. Это позволяет стилизовать родительский контейнер при фокусе на его дочернем элементе, например, при заполнении формы.
• :focus-visible — выбирает элемент, который находится в фокусе и при этом браузер решил, что фокус должен быть видимым (например, при навигации с клавиатуры). Это позволяет отключать стандартные обводки фокуса для мыши, но сохранять их для клавиатурной навигации.
• :target-within — выбирает элемент, если он сам или любой из его потомков является целевым элементом (target) для текущего URL (идентификатор фрагмента).

Псевдоклассы, связанные с временной шкалой (Time-dimensional Pseudo-classes)

• :current — выбирает элемент, который в данный момент отображается в контексте, связанном со временем (например, в веб-презентации или в видео с субтитрами).
• :past — выбирает элементы, которые были отображены до текущего момента.
• :future — выбирает элементы, которые будут отображены после текущего момента.

Псевдоклассы, связанные с лингвистикой (Linguistic Pseudo-classes)

• :dir(ltr) и :dir(rtl) — выбирают элементы, у которых направление текста (слева направо или справа налево) определено семантически (например, атрибутом dir). Это более точный способ, чем использование атрибутного селектора [dir="ltr"], так как :dir() учитывает наследование направления.
• :lang(zh) — выбирает элементы, язык которых определён как китайский. В Level 4 уточнено, что :lang() может принимать список языков через запятую и поддерживает подстановочные знаки (например, :lang(*-US) выберет все варианты английского языка, используемые в США).

Псевдоэлементы

Псевдоэлементы позволяют стилизовать части элемента, которые не являются отдельными узлами DOM. В Selectors Level 4 были уточнены существующие псевдоэлементы (::before, ::after, ::first-letter, ::first-line, ::selection, ::backdrop, ::placeholder, ::marker), но новых не добавлено. Основное изменение касается синтаксиса: двойное двоеточие (::) стало обязательным для всех псевдоэлементов, чтобы отличать их от псевдоклассов.

Комбинаторы

Комбинаторы определяют отношения между двумя или более селекторами. В Level 4 используется четыре комбинатора:

• Потомок (Descendant combinator): div p — выбирает элементы p, которые являются потомками div.
• Дочерний (Child combinator): div > p — выбирает элементы p, которые являются прямыми дочерними элементами div.
• Соседний (Next-sibling combinator): div + p — выбирает элемент p, который следует непосредственно за div.
• Последующий (Subsequent-sibling combinator): div ~ p — выбирает все элементы p, которые следуют за div и являются его соседями.

Применение и значение

Модуль Selectors Level 4 является основой для современной веб-разработки. Он позволяет разработчикам писать более точные, гибкие и поддерживаемые стили. Возможность выбора элементов на основе их состояния (:valid, :invalid, :focus-visible), содержимого (:empty, :blank) и сложных структурных отношений (:nth-child(An+B of S)) значительно упрощает создание адаптивных интерфейсов, валидацию форм и реализацию сложных макетов без использования JavaScript.

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

Несмотря на широкие возможности, спецификация Selectors Level 4 не лишена критики. Основные замечания касаются:

• Сложности синтаксиса: Некоторые новые псевдоклассы, такие как :nth-child(2 of .highlight), могут быть трудны для понимания начинающими разработчиками.
• Производительности: Реализация сложных селекторов, особенно с использованием :has(), может быть вычислительно затратной для браузеров, особенно на больших страницах с глубокой вложенностью элементов.
• Неполной поддержки браузерами: На момент написания статьи многие новые функции, такие как :has(), :user-invalid и :nth-child(An+B of S), поддерживаются не всеми браузерами или поддерживаются с ограничениями. Это вынуждает разработчиков использовать полифилы или обходные пути.
• Отсутствия некоторых возможностей: Некоторые предложения, такие как селекторы на основе содержимого текста (:contains()) или селекторы для выбора родительского элемента, были отложены или удалены из спецификации из-за сложности реализации и потенциальных проблем с производительностью.

Интересные факты

• Селектор :has() (читается как «родительский селектор» или «селектор, имеющий») был одним из самых ожидаемых нововведений в CSS. Он позволяет выбирать элемент на основе его содержимого. Например, div:has(> p) выберет все div, которые имеют прямой дочерний элемент p.
• Спецификация Selectors Level 4 является частью более широкой экосистемы CSS, и её возможности часто пересекаются с другими модулями, такими как CSS Grid Layout и CSS Flexbox.
• Разработка спецификации велась в тесном сотрудничестве с производителями браузеров (Google, Mozilla, Apple, Microsoft), что позволило учесть практические аспекты реализации.

Источники

1. Спецификация W3C «Selectors Level 4» (Candidate Recommendation).
2. Документация MDN Web Docs по CSS-селекторам.
3. Статьи и блоги разработчиков браузеров (Chromium Blog, Mozilla Hacks, WebKit Blog) о реализации новых селекторов.
4. Книга «CSS: The Definitive Guide» (Эрик Мейер, Эстель Уэйл).