Кратко

  • В проекте Selectors Level 4 за ноябрь 2018 года W3C описал :has() как проверку ребёнка или следующего соседа, но исключил её из живого профиля, применявшегося к CSS.
  • В мае 2022 года деление на профили исчезло, а :has() стала необязательной функцией с пометкой at-risk; ноябрьская редакция запретила вложенную :has() и обычные псевдоэлементы в аргументе.

Главная страница газеты собирается из карточек. Одни статьи приходят с фотографией, другие — с заголовком и парой строк. Обёртке с фотографией нужен иной отступ. Найти картинку внутри карточки CSS умеет. Найти саму карточку потому, что внутри есть картинка, долго приходилось через порученца: добавить класс, попросить шаблон повторить факт наличия фото или вызвать скрипт для проверки детей. Снимок уже лежит на столе, а хозяин комнаты запрашивает справку о том, что кто-то принёс снимок.

Проект W3C от 21 ноября 2018 года сформулировал нужный вопрос. a:has(> img) выбирает ссылку, у которой изображение является непосредственным ребёнком. Выбирается ссылка; изображение даёт основание. Рядом приводится dt:has(+ dt): термин определения, за которым сразу идёт другой термин. Прозвище «родительский селектор» подходит к первому примеру и спотыкается о второй. Можно спросить и про соседа за стеной. :has() проверяет отношение, привязанное к выбранному элементу.

В версии 2018 года письмо, однако, держали в отдельной почтовой комнате. Проект делил селекторы на живой профиль для постоянно действующего CSS и профиль снимка для проверки статического дерева в определённый момент; примером последнего был querySelector(). :has() относилась к профилю снимка и исключалась из живого. Инспектор мог выяснить, есть ли в ссылке изображение. Действующая таблица стилей по тому проекту не могла использовать этот вопрос. Авторы прямо приглашали разработчиков реализаций пересмотреть границу. Язык уже знал семейный адрес, но доставку в CSS ещё запрещали.

Проект от 7 мая 2022 года перестроил почту. В списке изменений указано удаление профилей; :has() отмечена как необязательная и at-risk. Жёсткая стена между разовым запросом и живой таблицей стилей исчезла. Поддержка функции по-прежнему оставалась выбором реализации в этом документе. Правила разрешили задавать вопрос; браузеры решали, отвечать ли на него.

Отношение читается по знакам. В a:has(> img) знак > означает непосредственного ребёнка. В dt:has(+ dt) знак + означает следующего брата без промежутка. Сменился знак — сменился адресат. До двоеточия стоит элемент, который будет выбран; внутри скобок — относительное условие. Обёртка может отвести место изображению, если оно действительно находится внутри. Два термина рядом могут получить подходящее оформление. Структура документа остаётся прежней, зато рамка перестаёт притворяться слепой.

Майская версия 2022 года предлагает ловушку для человека, который проверяет код только по общему виду. section:not(:has(h1, h2, h3, h4, h5, h6)) означает раздел без заголовков среди потомков. section:has(:not(h1, h2, h3, h4, h5, h6)) означает раздел с каким-либо потомком, который не является заголовком. Обычный абзац удовлетворит второму выражению, даже если заголовок на месте. Скобка переехала, и редакционная проверка начала ловить другой сюжет. Пунктуации пора платить зарплату.

Редакция от 11 ноября 2022 года провела границы. Нельзя вложить :has() в другую :has(); псевдоэлементы в аргументе в общем случае запрещены. Документ объясняет причину: существование некоторых псевдоэлементов зависит от оформления предков. Если предок выбирает оформление на основании того, что сам этим оформлением порождает, возникает круг. Семья может обсудить детей; бесконечное собрание, создающее участников собственным решением, им ни к чему.

История публикаций W3C связывает тексты 2018 и 2022 годов. В первом браузеру позволяли описать отношение, но живой CSS оставляли за дверью; в следующем отношение стало необязательной возможностью без прежнего разделения профилей. Механизм селекторов проверяет дерево. Издатель решает, что визуально делать с результатом: расширить карточку с фотографией, выделить соседние термины, найти раздел без заголовка. Документ не обязан вести вторую учётную книгу о жильцах каждой карточки.

Родитель распечатал письмо. Заодно пришла открытка от соседа — селектор предусмотрел и это.