parent :has() stateful child

Given some DOM like this:

<div class="field-wrapper">
  <input class="checkbox__input" name="" id="checkbox_choice_1" value="foo" checked>
  <label class="checkbox__label" for="checkbox_choice_1">Choice 1</label>
<div>

you can do something like:

.field-wrapper:has(input:checked) {
   /* ...changes that apply to the whole wrapper... */
}

without fiddling with classes based on child state bubbling up to the parent in js.

In this way we can get a nice recolor on the parent wrapper based on child state without any fiddling with adding or removing classes:

Note: :has() is not available in FF, yet. In the mean time, if you want a CSS solution to this problem for all browsers, you probably want to put all the stateful changes on the <label> element and use the CSS sibling selector:.checkbox__input:checked+.checkbox__label { ... }.