Почему в CSS нет родительского селектора

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

Однако есть обходные пути:

1. :has() (новый селектор) — позволяет выбрать родителя по условию потомка (пока поддержка неполная):

.parent:has(.child:hover) {
  background: red;
}

2. JavaScript — для сложных случаев динамического изменения родителя.

3. CSS-переменные — потомки могут изменять переменные, которые родитель использует:

.parent {
  --bg-color: blue;
  background: var(--bg-color);
}
.child:hover {
  --bg-color: red;
}

Основная причина — архитектурное решение для предсказуемости и производительности рендеринга.