[CSS] Conditionally Assign Style to a Parent Element with Focus-Within Pseudo-class

Use the focus-within pseudo-class to conditionally assign styling to a parent element when its child receives focus.

HTML:

import "./styles.css";

document.getElementById("app").innerHTML = `
<ul id="red">
  <li>
    <input value="Red">
  </li>
</ul>
`;

 

CSS:

#red:focus-within {
  background-color: red;
}