css: изменение свойств родителя в зависимости от состояния потомка
Подскажите, позволяет ли CSS изменить свойства родителя в зависимости от состояния потомка (к примеру есть фокус или нет фокуса)
например, изменить задний фон, если у дочернего элемента установлен фокус
что-то типа такого:
.parent(input:focus) {
background: red;
}
у меня задача - перекрасить границу (border), если установлен фокус в элемент input, который находится внутри контейнера с данной рамкой
Конечно я могу сделать через )*(:
- контейнер с рамкой сам по себе
- перед ним элемент
inputсам по себе и через абсолютное позиционирование этот элемент находится как бы в рамке - а дальше
input:focus ~ .parent {}
Но это все таки изврат и не хотелось бы использовать такой подход Позволяет ли css решать подобные задачи более аккуратно?
Ответы (1 шт):
На текущий момент (сентябрь 2020г.), реализация поведения описанного в вопросе, используя только CSS - недоступна.
Ждём, когда утвердят и добавят псевдокласс :has(). Следим и надеемся.
Пока решения два: пересмотреть разметку или использовать скрипты.