Fancy new selectors within groups can break your CSS rule

Just when you think CSS is completely forgiving in its syntax here is an example where it will ignore your CSS rules. I would have thought it would skip over selectors it didn’t recognise, but it seems that if one is invalid (not recognised) it skips the whole group and rules altogether.

I was working on enhancing a bit my responsive dropdown menu by adding the CSS :focus-within pseudo-class in order to tab through the dropdown menu items.

To avoid duplication, I thought it is a smart move to group this new fancy CSS :focus-within pseudo-class with an existing selector. It was beautiful and it looked a lot like a progressive enhancement but in the end, it broke the entire CSS rule within browsers that do not support the CSS :focus-within, e.g. IE.

An excerpt from Fancy new selectors within groups can break your CSS rule

View original article