Skip to content

111 Recipes

Unsupported CSS selectors in a group invalidate the whole group

According to the CSS Selectors specification, a group of selectors containing an invalid selector is invalid. As a result, the whole CSS rule with the invalid selector becomes invalid itself and is not applied.

Example case

This is a CSS rule with a group of two selectors:

li:hover ul,
li:focus-within ul {
    background-color: yellow;
}

In browsers that don’t recognize both selectors, the group 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, even though it is a selector perfectly understood by both browsers.

A solution

A solution is to avoid grouping and just make a separate rule for the unsupported selector. In this solution, the above example becomes:

li:hover ul {
    background-color: yellow;
}

li:focus-within ul {
    background-color: yellow;
}

:focus-within will still do nothing in browsers that don’t support it, but at least our style is applied for the selector that is supported.

Documentation and references