css: изменение свойств родителя в зависимости от состояния потомка

Подскажите, позволяет ли CSS изменить свойства родителя в зависимости от состояния потомка (к примеру есть фокус или нет фокуса)

например, изменить задний фон, если у дочернего элемента установлен фокус

что-то типа такого:

.parent(input:focus) {
    background: red;
}

у меня задача - перекрасить границу (border), если установлен фокус в элемент input, который находится внутри контейнера с данной рамкой

Конечно я могу сделать через )*(:

  1. контейнер с рамкой сам по себе
  2. перед ним элемент input сам по себе и через абсолютное позиционирование этот элемент находится как бы в рамке
  3. а дальше input:focus ~ .parent {}

Но это все таки изврат и не хотелось бы использовать такой подход Позволяет ли css решать подобные задачи более аккуратно?


Ответы (1 шт):

Автор решения: UModeL

На текущий момент (сентябрь 2020г.), реализация поведения описанного в вопросе, используя только CSS - недоступна.

Ждём, когда утвердят и добавят псевдокласс :has(). Следим и надеемся.

Пока решения два: пересмотреть разметку или использовать скрипты.

→ Ссылка