Связанный псевдокласс :has()

Псевдокласс :has() выбирает элемент, если он содержит потомка, соответствующего аргументу. Его часто называют «селектором родителя»: он позволяет оформлять родительский элемент в зависимости от его дочерних элементов — возможности, которой раньше в CSS не было.

.card:has(img) выбирает любой элемент .card, содержащий потомка img. Аргумент представляет собой список относительных селекторов — любой допустимый CSS-селектор, описывающий элементы относительно целевого элемента.

Оформляйте контейнер формы, если он содержит недопустимый ввод: form:has(:invalid) { border-color: red; }. Оформляйте раздел, содержащий заголовок: section:has(h2) { padding-top: 2rem; }. Внешний вид родителя меняется в зависимости от состояния дочернего элемента.

:has() может выбирать предшествующие соседние элементы — то, чего не позволяют сделать + и ~. h2:has(+ p) выбирает элементы h2, сразу за которыми следует p. li:has(~ .active) выбирает элементы li, у которых есть следующий соседний элемент .active.

Реагируйте на встроенную проверку формы без JavaScript: input:has(~ .error-msg) оформляет поле ввода, у которого есть соседнее сообщение об ошибке. label:has(+ input:required) оформляет подписи, связанные с обязательным полем ввода, — всё это только средствами CSS.

Выделяйте контейнеры навигации в зависимости от активного дочернего элемента: nav:has(.active) применяет стили ко всей навигации, если любой дочерний элемент имеет активный класс. Это удобно для обозначения текущего раздела навигации на уровне контейнера.

.grid:has(.card:focus-within) оформляет всю сетку, когда любая карточка получает фокус с клавиатуры. .dropdown:has(:hover) оставляет раскрывающийся список открытым при наведении на любого потомка — это проще, чем сложные цепочки комбинаторов соседних элементов.

.sidebar:has(nav) применяет другой макет, чем .sidebar:not(:has(nav)). Условный макет без JavaScript: наличие или отсутствие определённых дочерних элементов управляет макетом родителя, обеспечивая по-настоящему адаптивный CSS, учитывающий содержимое.

:has() с широкими селекторами аргумента, например :has(*), может быть затратным: браузеру приходится проверять каждый элемент. Делайте аргументы :has() конкретными. По возможности предпочитайте :has(> .specific-child) (прямой дочерний элемент) варианту :has(.specific-child) (любой потомок).

:has() поддерживается в Chrome 105+, Safari 15.4+ и Firefox 121+. Полная базовая поддержка появилась в конце 2023 года. Полифила нет (для его имитации потребовался бы JavaScript), поэтому в старых браузерах используйте этот псевдокласс с постепенным улучшением, если функция не является критически важной.

Шаблоны, для которых раньше требовались обработчики событий JS: «добавить класс родителю, когда дочерний элемент получает фокус», «показать наложение, когда существует триггер модального окна», «оформить сетку иначе, если в ней ровно три элемента». :has() декларативно обрабатывает все эти случаи.

Чем :has() отличается от существующих CSS-комбинаторов, таких как + и ~?

:has() — первый настоящий реляционный псевдокласс CSS, позволяющий выбирать родителей и предшествующие соседние элементы. Он поддерживает оформление, определяемое содержимым, реакцию на состояние формы, выделение навигации и множество шаблонов, для которых раньше требовалось управление DOM с помощью JavaScript, — и всё это декларативно в CSS.