According to the CSS Selectors specification, a group of selectors is invalid if any of its selectors is invalid. When that happens, the whole rule with the invalid selector becomes invalid itself and it is not applied at all.
An example
A CSS rule with one declaration and a group of two selectors:
li:hover ul,
li:focus-within ul {
background-color: yellow;
}
In browsers that don’t recognize both selectors, the whole group of selectors and, as a result, the whole rule become invalid.
For instance, Internet Explorer 11 and—as of 26 January 2020—Microsoft Edge do not understand :focus-within
.
So, they invalidate the whole group and, as a result, li:hover ul
has no effect either,
even though it is a selector perfectly understood by both browsers.
A solution
A solution is to avoid grouping. Just make a separate rule for the unsupported selector:
li:hover ul {
background-color: yellow;
}
li:focus-within ul {
background-color: yellow;
}
Now browsers that don’t support :focus-within
will not apply the style for it,
but they will apply the style for the universally supported li:hover ul
.