CSS：将焦点样式应用于未聚焦的元素？

Question

I have a fieldset that needs to imitate the appearance of components from a library, but I can't directly copy-paste its styling into the css for that div, since if the library theme gets changed then that copy-pasted css won't match with the other components. I was more or less doing this by applying the css classes used by that library (eg library-class ) to non-library elements like so (I'm using react):

return (
<fieldset className="library-class">
    <input/>
    <input/>
    <input/>
</fieldset>);

My issue is that the library applies this box shadow to input elements in focus, but I need my whole fieldset to show that box shadow - rather than the inputs inside - when any element inside is focused. The browser debug css looks like this:

library-class:focus{
    box-shadow: #c1c1c1 0 0 1px;
}

Is there a way to forcefully apply the:focus pseudo class to my whole fieldset?

Answer 1

You can use the :focus-within pseudo-class:

 .library-class:focus-within { box-shadow: #f90 0 0 0.5em; }

 <fieldset class="library-class"> <input/> <input/> <input/> </fieldset>

References:

• :focus-within .