Skip to content

109 Sandbox

A website made for testing

An unsupported CSS selector in a group invalidates the whole group

Published ·UPD ·In CSS

2020-06-04: Copied to recipes.op111.net

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

Example case

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

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

This rule works fine in browsers that recognize both selectors.

In browsers that don’t recognize both selectors, the group and, as a consequence, the whole rule become invalid.

For instance, Internet Explorer 11 and—as of 26 January 2019—Microsoft Edge do not support :focus-within and invalidate the whole group. As a result, li:hover ul has no effect, even though it is a selector supported by both browsers.

A solution

A solution is to not use 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;
}

Documentation and references