Fancy new selectors within groups can break your CSS rule

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.


This content originally appeared on Catalin Red and was authored by Red

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.

CSS selectors within groups

The scenario

:focus-within support on caniuse.com

Here’s the GitHub commit in question, the :focus-within pseudo-class doesn’t work on IE, as the above CanIUse chart shows, thus the below CSS rule gets invalidated entirely according to W3C specs.

.myEl,
.myEl:focus-within {
  /* ... */
}

If just one of these selectors were invalid, the entire group of selectors would be invalid.

The fix

I learned the lesson, fixed the CSS selectors and wrote this down. Also, you might like the article I wrote on how to visually validate an input field using :placeholder-shown and :focus-within.


This content originally appeared on Catalin Red and was authored by Red


Print Share Comment Cite Upload Translate Updates
APA

Red | Sciencx (2019-02-21T10:00:00+00:00) Fancy new selectors within groups can break your CSS rule. Retrieved from https://www.scien.cx/2019/02/21/fancy-new-selectors-within-groups-can-break-your-css-rule/

MLA
" » Fancy new selectors within groups can break your CSS rule." Red | Sciencx - Thursday February 21, 2019, https://www.scien.cx/2019/02/21/fancy-new-selectors-within-groups-can-break-your-css-rule/
HARVARD
Red | Sciencx Thursday February 21, 2019 » Fancy new selectors within groups can break your CSS rule., viewed ,<https://www.scien.cx/2019/02/21/fancy-new-selectors-within-groups-can-break-your-css-rule/>
VANCOUVER
Red | Sciencx - » Fancy new selectors within groups can break your CSS rule. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2019/02/21/fancy-new-selectors-within-groups-can-break-your-css-rule/
CHICAGO
" » Fancy new selectors within groups can break your CSS rule." Red | Sciencx - Accessed . https://www.scien.cx/2019/02/21/fancy-new-selectors-within-groups-can-break-your-css-rule/
IEEE
" » Fancy new selectors within groups can break your CSS rule." Red | Sciencx [Online]. Available: https://www.scien.cx/2019/02/21/fancy-new-selectors-within-groups-can-break-your-css-rule/. [Accessed: ]
rf:citation
» Fancy new selectors within groups can break your CSS rule | Red | Sciencx | https://www.scien.cx/2019/02/21/fancy-new-selectors-within-groups-can-break-your-css-rule/ |

Please log in to upload a file.




There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.