A :focus-within workaround for edge

Question

I am currently using the pseudo selector :focus-within in chrome however according to caniuse.com it's unavailable in Edge and IE, I found a neat workaround for it:

.focus-within-class > input:focus

However it combining it with focus-within like:

.focus-within > input:focus,
.focus-within:focus-within > input

does not work in Edge and the following solution does not work in chrome:

.focus-within > input:focus

How can I make :focus-within cross browser?

Answer 1

Couple of things. First, the "workaround" that you cite isn't really equivalent to :focus-within as the resulting rules apply to the <input> element. You could just as easily do

input:focus {
    /* rules here */
}

without bothering about the special classes. The real :focus-within pseudo-classs allows you to define rules that apply to the containing element, not the <input>

But if the particular workaround does have utility for you, you'll need to break your rules into separate blocks. That's because browsers silently ignore any CSS they don't understand. So when Edge sees

.focus-within > input:focus,
.focus-within:focus-within > input

it notices that there's a pseudo class that it doesn't understand (:focus-within), so it ignores the entire rule block, as you've noticed. If you split the rules into two blocks, Edge will only ignore the block it doesn't understand.

.focus-within > input:focus {
    /* rules here, which Edge will apply */
}

.focus-within:focus-within > input
    /* same rules here, which Edge will ignore */
}