Steps to reproduce
There are some newer CSS selectors such as
:focus-within, :focus-visible, :focus-ring. They are not currently supported in IE or Edge which is fine. But what’s the real issue is that using them they break other basic pseudo selectors such as
:focus. I would expect that they would be ignored if they aren’t supported rather than breaking other selectors.
Here is a codepen isolating the issue.
Comments and activity
- Microsoft Edge Team
Changed Assigned To to “Steven K.”
Changed Steps to Reproduce
Changed Assigned To to “Bogdan B.”
Changed Status to “By design”
I was able to repro this issue in 16299.309 and a recent development build. After talking to one of the developers in this area, it was determined that this was “by design.” See the following reference from the “Selectors Level 3” W3C Candidate Recommendation from the 30th of January 2018:
- the equivalence is true in this example because all the selectors are valid selectors. If just one of these selectors were invalid, the entire group of selectors would be invalid. This would invalidate the rule for all three heading elements, whereas in the former case only one of the three individual heading rules would be invalidated."
Which I was not aware of. Hope this helps and appreciate this submission,
Thank you! Looks like the “fix” is to just declare
:focus-withinstyles completely separate https://codepen.io/anthony-dandrea/pen/yKKGQR
Glad it helped. I was thinking the same thing, however, I did not have time yet to look at the repro again to see if that was an option. That sounds like a working solution. :)
Again thanks for the support and submission. Always nice to learn something new that is useful,