CSS :has() — проверка наличия потомков или соседних элементов

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

Базовая идея на одном примере

Подсветим карточку, если внутри есть активная кнопка. Без :has() обычно приходилось вешать модификатор на родителя через JS. Теперь это одна строка CSS:

/* выделяем div, если ПРЯМО внутри есть кнопка .active */
div:has(> button.active) {
  border: 2px solid var(--blue, #2563eb);
  box-shadow: 0 0 0 4px color-mix(in oklab, #2563eb 25%, transparent);
}

Читается как «выбери div, который имеет (has) прямого потомка button.active». Стрелочка > ограничивает поиск только прямыми детьми — так и быстрее, и точнее.

Живой HTML-пример: подсветка карточек

Выход за пределы «внутри»: соседи и порядок

:has() умеет смотреть не только вглубь, но и вокруг:

Есть следующий сосед с модификатором — применяем стиль к текущему элементу:

/* пункт меню подсвечивается, если ПОСЛЕ него идёт активный пункт */
.nav-item:has(+ .nav-item.current) {
  border-right: 2px solid #d1d5db;
}

Состояние чекбокса влияет на ближайший контейнер — делаем «чистый» переключатель без JS:

Формы без лишних классов

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

Псевдокласс :user-invalid даёт дружелюбное поведение: стиль срабатывает после взаимодействия пользователя, а не сразу при загрузке.

Аккордеоны и FAQ без JavaScript

Хотите выделять вопрос, когда ответ открыт? Используем встроенное поведение <details> и проверяем его атрибут open:

«Пустые» состояния и медиа

Частая задача — подсветить карточку только когда в ней действительно есть иллюстрация:

.card:has(img) .title::after {
  content: " • с иллюстрацией";
  color: #9ca3af; font-weight: 400;
}

/* и наоборот — мягко маркируем пустые блоки */
.card:not(:has(img)) {
  background: repeating-linear-gradient(
    -45deg, #f9fafb, #f9fafb 8px, #f3f4f6 8px, #f3f4f6 16px
  );
}

Комбинаторика: :has() + :is() + :not()

Сила :has() раскрывается в сочетаниях. Например, нам нужен контейнер, если внутри есть либо активная кнопка, либо фокус:

.panel:has(:is(button.active, [data-cta="true"], :focus-within)) {
  outline: 2px solid #22c55e;
  outline-offset: 2px;
}

Или — выделить карточки, у которых нет изображений и нет CTA-кнопки:

.card:not(:has(img, [data-cta])) {
  opacity: .7;
}

Специфичность и производительность

Специфичность. Как и у :is(), специфичность :has() берётся по самому «сильному» селектору внутри аргумента. Если написать .card:has(#buy), у правила будет специфичность с id — перебить его потом непросто. Держите аргументы аккуратными и без лишних id.

Производительность. Современные движки оптимизируют :has(), но избыточные «глубокие» поиски всё равно стоят дорого. Советы простые: ограничивайте область (например, .list > .item:has(> .badge) вместо глобального .item:has(.badge)), используйте прямые дочерние селекторы и не злоупотребляйте несколькими :has() подряд в одном правиле.

Прогрессивное улучшение: фолбэки и @supports

Проекты с широкой аудиторией должны иметь разумный дефолт, а улучшения — включаться там, где поддержка есть. Помогает проверка через @supports:

/* дефолт без :has() */
.card { border-color: #e5e7eb; }

/* улучшение там, где :has() поддерживается */
@supports selector(.card:has(button.active)) {
  .card:has(> button.active) { border-color: #2563eb; }
}

Если логика критична (например, подсветка ошибок формы), можно оставить минимальный JS-полифилл только для проставления класса на родителя, а визуализацию — по-прежнему держать в CSS. Так вы сохраните читаемость и предсказуемость стилей.

Диагностика сложных случаев

Проверяйте, тот ли контекст вы выбрали: :has(> ...) ищет только прямых потомков; без стрелочки поиск происходит среди всех потомков.
Подсказка в DevTools: временно добавьте outline к правилу с :has(), чтобы визуально увидеть, какие контейнеры совпадают.
Избегайте завязки на динамический порядок, если он меняется анимациями: предпочитайте устойчивые маркеры — дата-атрибуты и роли.

Короткие рецепты, которые пригодятся завтра

/* 1) Заголовок блока активен, если внутри есть фокус */
.block-title:has(+ .block :focus-within) { color: #111827; }

/* 2) Подсветка строки таблицы с выбранным чекбоксом */
tr:has(> td input[type="checkbox"]:checked) { background: #f0f9ff; }

/* 3) Компонент поиска, когда внутри есть текст */
.search:has(input:not(:placeholder-shown)) .search__clear { opacity: 1; pointer-events: auto; }

/* 4) Карточка имеет «рейтинговую» метку — подвинем отступы */
.card:has(.rating[data-score^="4"]) { padding-top: 20px; }

/* 5) Предыдущий пункт меню подсвечается, если следующий активен */
.menu__item:has(+ .menu__item.current) { border-right: 2px solid #e5e7eb; }

Итоги

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

«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.

Телеграм Подкаст Бесплатные учебники