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-withinpseudo-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 CSSAn excerpt from Fancy new selectors within groups can break your CSS rule
:focus-withinpseudo-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.