You are viewing this site in a simplified layout because your browser does not yet support CSS Subgrid.

op111.net

Search op111.net

Unsupported CSS selectors invalidate the whole selector group

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.

Documentation and references