子元素状态改变时，怎么改变父元素的css呢？

Question

// 父元素状态改变时，改变子元素的css，可以这样写

form input{
  color: black;
}

form.active input{
  color: red;
}

那么，子元素状态改变时，怎么改变父元素的css呢?
比如：input获取到focus时，怎么改变整个form的颜色?
纯css的写法
求教大家，谢谢！

Answer 1

也许你可以试试这个 focus-within

Answer 2

css没有选择父元素的选择器只能是给他们相同的父元素添加:hover 改变，不能直接通过子元素来改变父元素CSS

<div class="parent">
    <form>
        <input type="text">
    </form>
</div>
<style>
    .parent:hover input{
        background:green;
     }
    .parent:hover form{
        background:orange;
     }
</style>

Answer 3

不行，没有父选择器，用js吧，它是万能的