Модуль Selectors Level 3

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

История и стандартизация

Разработка селекторов CSS началась одновременно с созданием самого языка CSS в середине 1990-х годов. Первая спецификация CSS Level 1 (1996) содержала базовые селекторы: по имени элемента, классу и идентификатору. В CSS Level 2 (1998) были добавлены селекторы потомков, дочерних элементов, атрибутов и псевдоклассы для ссылок (:link, :visited).

Работа над Selectors Level 3 началась в 2001 году. Основной задачей было расширение набора селекторов для удовлетворения потребностей веб-разработчиков и дизайнеров без усложнения разметки HTML. После нескольких рабочих черновиков и периода активного обсуждения, спецификация достигла статуса Рекомендации W3C (W3C Recommendation) 1 ноября 2018 года. Этот статус означает, что документ прошёл все этапы рецензирования и считается стабильным для широкого внедрения.

Основные категории селекторов

Selectors Level 3 классифицирует селекторы по нескольким категориям, каждая из которых решает определённые задачи выбора элементов.

Простые селекторы (Simple selectors)

Это базовые строительные блоки, которые могут комбинироваться для создания более сложных выражений. К ним относятся:

• Селектор типа — выбирает элементы по имени тега (например, div, p, h1).
• Селектор класса — выбирает элементы по значению атрибута class (например, .container).
• Селектор идентификатора — выбирает элемент по уникальному значению атрибута id (например, #header).
• Селектор универсальный — выбирает все элементы; обозначается символом *.
• Селекторы атрибутов — выбирают элементы на основе наличия или значения атрибута. В Level 3 добавлены подстроковые операторы: ^= (начинается с), $= (заканчивается на) и *= (содержит подстроку).

Псевдоклассы (Pseudo-classes)

Псевдоклассы определяют состояние элемента или его позицию в дереве документа. Selectors Level 3 значительно расширил эту категорию. Ключевые дополнения:

• Структурные псевдоклассы: :nth-child(), :nth-last-child(), :nth-of-type(), :nth-last-of-type(), :first-child, :last-child, :first-of-type, :last-of-type, :only-child, :only-of-type, :empty. Они позволяют выбирать элементы по их порядковому номеру среди соседних узлов.
• Псевдоклассы пользовательского интерфейса: :enabled, :disabled, :checked, :indeterminate, :default, :valid, :invalid, :in-range, :out-of-range, :required, :optional, :read-only, :read-write. Эти селекторы реагируют на состояние элементов форм.
• Псевдоклассы отрицания: :not() — позволяет исключить элементы, соответствующие переданному селектору (в Level 3 принимает только простой селектор).

Псевдоэлементы (Pseudo-elements)

Псевдоэлементы позволяют стилизовать части содержимого элемента, которые не представлены в DOM. В Selectors Level 3 они обозначаются двойным двоеточием (::) для отличия от псевдоклассов. Основные:

• ::before и ::after — создают виртуальные дочерние элементы в начале или конце содержимого.
• ::first-line — стилизует первую строку текста блочного элемента.
• ::first-letter — стилизует первую букву текста блочного элемента.
• ::selection — стилизует часть документа, выделенную пользователем.

Комбинаторы (Combinators)

Комбинаторы определяют отношения между двумя или более простыми селекторами:

• Потомок (пробел) — выбирает элементы, являющиеся потомками (на любом уровне вложенности) указанного предка.
• Дочерний (>) — выбирает элементы, являющиеся прямыми дочерними узлами.
• Соседний (+) — выбирает элемент, непосредственно следующий за другим элементом (сосед по родителю).
• Последующий (~) — выбирает элемент, следующий за другим элементом (не обязательно непосредственно), при условии общего родителя.

Синтаксис и специфичность

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

• ID — количество селекторов идентификаторов.
• Класс, атрибут, псевдокласс — количество селекторов классов, атрибутов и псевдоклассов.
• Тип, псевдоэлемент — количество селекторов типа и псевдоэлементов.

Например, селектор #header .nav a:hover имеет специфичность (1, 2, 1): один ID, два класса (.nav и :hover), один тип (a). Правило с более высокой специфичностью переопределяет правило с более низкой. Селекторы с одинаковой специфичностью разрешаются в порядке появления в таблице стилей.

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

Selectors Level 3 стал основой для современного веб-дизайна. Его возможности позволяют:

• Создавать сложные макеты без лишних классов и ID в разметке, используя структурные псевдоклассы.
• Реализовывать адаптивные интерфейсы с помощью псевдоклассов состояния (например, :hover, :focus, :disabled).
• Упрощать поддержку кода за счёт семантической стилизации: вместо добавления классов для чётных/нечётных строк таблицы используется :nth-child(even).
• Повышать производительность за счёт уменьшения объёма HTML-разметки и переноса логики выбора в CSS.

Модуль используется всеми современными браузерами (Google Chrome, Mozilla Firefox, Apple Safari, Microsoft Edge) и является стандартом де-факто для написания стилей в веб-разработке.

Ограничения и критика

Несмотря на широкое распространение, Selectors Level 3 имеет некоторые ограничения:

• Отсутствие селектора родителя: невозможно выбрать элемент на основе его дочерних узлов (например, стилизовать <div>, содержащий <img>).
• Сложность специфичности: при большом количестве вложенных селекторов вычисление специфичности может стать нетривиальным, что приводит к неожиданным переопределениям стилей.
• Производительность: некоторые селекторы, особенно использующие универсальный символ * или глубокие вложенности, могут замедлять рендеринг страниц с большим DOM-деревом.

В ответ на эти ограничения была разработана спецификация Selectors Level 4, которая находится в статусе рабочего черновика с 2018 года и предлагает, среди прочего, псевдокласс :has() для выбора родительских элементов.

Источники

• W3C Recommendation: Selectors Level 3 (2018)
• CSS Snapshot 2020 (W3C Group Note)
• Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification
• MDN Web Docs: CSS selectors