CSS :has() — Псевдокласс, который давно ждали

Псевдокласс :has(), устраняет давнее ограничение в CSS — невозможность стилизовать элементы на основе их содержимого.

Хотя CSS всегда позволял стилизовать дочерние элементы на основе родительских, обратное было невозможно до сих пор. Это изменение открывает новые возможности для динамической стилизации с учётом содержимого.

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

/* Другой стиль карточек, если они содержат изображение */
.card:has(img) {
  padding: 0;
  overflow: hidden;
}

Этот простой синтаксис исключает использование JavaScript или сложных обходных путей CSS, необходимых ранее.

Псевдокласс :has() не может быть вложен в :has(). Также, если псевдоэлемент явно не определён как допустимый в :has, он не может быть вложен в :has.

Псевдокласс :has() становится более мощным в сочетании с селекторами для проверки состояний, позиций и комбинаций:

/* Стиль параграфов, содержащих ссылки */
p:has(a) {
  padding-right: 1.5em;
  background: url(external-link.svg) no-repeat right;
}

/* Стиль групп форм с недопустимыми данными input */
.form-group:has(input:invalid) {
  border-left: 3px solid red;
}

/* Стиль заголовков, за которыми следуют абзацы */
h2:has(+ p) {
  margin-bottom: 0.5em;
}

Псевдокласс :has() позволяет создавать адаптивные макеты, реагирующие на структуру контента:

.grid {
  display: grid;
  gap: 1rem;
}

/* Переключение на одноколоночный режим, если какая-либо карточка содержит длинный контент */
.grid:has(.card > p:has(+ p)) {
  grid-template-columns: 1fr;
}

/* Добавление дополнительных отступов, если карточки содержат изображения */
.grid:has(.card:has(img)) {
  gap: 2rem;
}

Такой подход избавляет от ручного управления классами или использования JavaScript для корректировки макета.

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

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

/* Базовые стили работают везде */
.card { padding: 1rem; }

/* Улучшенные стили для браузеров с поддержкой :has() */
@supports selector(:has(*)) {
  .card:has(img) { padding: 0; }
}

Совет: начните с малого — замените переключение стилей на основе JavaScript псевдоклассом :has(). Постепенно переходите к стилизации макетов с учётом контента.

• Использование CSS :has() в реальных условиях
• The Relational Pseudo-class: :has()
• :has()

Комментарии