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

Использование CSS :has() для стилизации родителя на основе состояния дочерних элементов. Используйте для форм, карточек и интерактивных компонентов.

/* 1. Подсветка поля формы, если внутри есть ошибка */
.form-field:has(.error-message) {
  border-color: #ef4444;
  background-color: #fef2f2;
}

.form-field:has(.error-message) label {
  color: #ef4444;
}

/* 2. Подсветка карточки, если внутри есть активная кнопка */
.card:has(button:active) {
  transform: scale(0.98);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* 3. Скрыть родителя, если все дочерние элементы скрыты */
.container:has(> *:not([hidden])) {
  display: block;
}

.container:not(:has(> *:not([hidden]))) {
  display: none;
}

/* 4. Стилизация навигации, если внутри есть активная ссылка */
nav:has(a.active) {
  border-bottom: 2px solid #3b82f6;
}

/* 5. Подсветка группы чекбоксов, если хотя бы один выбран */
.checkbox-group:has(input:checked) {
  background-color: #eff6ff;
  border-color: #3b82f6;
}

/* 6. Стилизация карточки товара, если товар в корзине (есть иконка корзины) */
.product-card:has(.in-cart-icon) {
  opacity: 0.7;
  position: relative;
}

.product-card:has(.in-cart-icon)::after {
  content: "В корзине";
  position: absolute;
  top: 10px;
  right: 10px;
  background: #10b981;
  color: white;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 12px;
}

Пример для формы с валидацией:

<div class="form-field">
  <label for="email">Email</label>
  <input type="email" id="email" required>
  <span class="error-message" hidden>Неверный email</span>
</div>

.form-field:has(.error-message:not([hidden])) {
  border: 2px solid #ef4444;
  padding: 12px;
  border-radius: 4px;
}

.form-field:has(.error-message:not([hidden])) input {
  border-color: #ef4444;
}

.form-field:has(input:focus) {
  border-color: #3b82f6;
}

Пример для карточек с активным состоянием:

/* Подсветка карточки при наведении на кнопку внутри */
.card:has(button:hover) {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  transform: translateY(-2px);
  transition: all 0.2s;
}

Usage:

Добавьте стили в ваш CSS файл. :has() поддерживается во всех современных браузерах (Chrome 105+, Firefox 121+, Safari 15.4+).

Notes:

⚠️ :has() работает как “родительский селектор” — проверяет наличие дочерних элементов. Не путайте с :is() и :where(). Для старых браузеров используйте JavaScript или полифиллы. Проверяйте поддержку на caniuse.com.

Как использовать