Skip to content

Instantly share code, notes, and snippets.

@meduzen

meduzen/ie-edge-multiple-rules-focus-within.css

Last active July 12, 2019 08:43
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save meduzen/c55f32cc9327118da0b7acd57a459e7c to your computer and use it in GitHub Desktop.
Save meduzen/c55f32cc9327118da0b7acd57a459e7c to your computer and use it in GitHub Desktop.
Download ZIP
Raw
ie-edge-multiple-rules-focus-within.css
// IE & Edge do not support :focus-within, so they ignore the 3 selectors.
@media screen and (min-width:896px) {
.sub-nav:target,
.sub-nav__parent:focus-within .sub-nav,
.sub-nav__parent:hover .sub-nav {
opacity: 1;
visibility: visible;
}
}
// By removing the line with :focus-within, IE & Edge apply the rules.
@media screen and (min-width:896px) {
.sub-nav:target,
.sub-nav__parent:hover .sub-nav {
opacity: 1;
visibility: visible;
}
}
@meduzen
Copy link
Author

meduzen commented Jul 12, 2019

This behaviour is in line with the CSS spec:

a group of selectors containing an invalid selector is invalid

Thanks to @Mamboleoo.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment