Skip to content

111 Recipes

Unsupported CSS selectors in a group invalidate the whole group

Published ·UPD ·In Recipes

According to the CSS Selectors specification, a group of selectors is invalid if any of the individual selectors it contains is invalid. Then the whole CSS rule with the invalid selector becomes invalid and is not applied at all.

Example case

This is 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 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;
}

Now browsers that don’t support :focus-within will not apply the style for li:focus-within ul, but at least they will apply the style for the universally supported li:hover ul.

Documentation and references