intermediate

:has selector

Используйте relational selectors для parent-state styling, состояний форм, замены фич и осознания стоимости селекторов.

`:has()` — реляционный pseudo-class: элемент совпадает, если содержит (или следует за) другим подходящим элементом. Даёт parent-state styling, для которого раньше нужны были JavaScript или лишние классы.

					.form-group:has(:invalid) {
  border-color: var(--danger);
}
.card:has(img) {
  grid-template-columns: 8rem 1fr;
}
nav:has(+ main > h1) {
  margin-block-end: 0;
}

Держите селекторы в рамках — карточка с изображением понятна; половина DOM от одного :has — нет. Проверяйте поддержку браузеров и progressive enhancement.

На интервью: сценарии parent selection, progressive enhancement и стоимость селекторов.

Типовые ошибки: слишком широкие :has; замена логики состояния приложения, которая должна быть в JS или ARIA.

Компромисс: меньше разметки против графа селекторов, который труднее понимать.

Чеклист:

:has в границах компонента.
Визуальное состояние, не скрытая логика приложения.
Fallbacks при жёстких требованиях к поддержке.
Производительность селекторов на больших деревьях.