Changing a Fieldset's Background Color with Nested Input Fields using CSS

Question

I'm using this solution: Is it possible to change a fieldset's background-color on input:focus?

... to change the background of a fieldset as a user moves through a form. On a basic level this works great. On a more advanced level, I'm having trouble making this work on input fields that are nested inside of a conditional div. In other words, the inputs are no longer siblings to the div in his example.

To give you a visual, this works:

<fieldset>
<input>
<div></div>
</fieldset>

But this does not:

<fieldset> 
<div class="conditional"> 
<input> 
</div> 
<div></div> 
</fieldset>

Answer 1

Actually, you can now affect the parent of an input on focus with

:focus-within

The :focus-within CSS pseudo-class represents an element that has received focus or contains an element that has received focus. In other words, it represents an element that is itself matched by the :focus pseudo-class or has a descendant that is matched by :focus. (This includes descendants in shadow trees.)

MDN

fieldset:focus-within {
  background: red;
}

<fieldset>
  <input>
</fieldset>