One Invalid Pseudo Selector Equals an Entire Ignored Selector
Perhaps you know this one: if any part of a selector is invalid, it invalidates the whole selector. For example:
div, span::butt {
background: red;
}Even though div is a perfectly valid selector, span:butt is not, thus the entire selector is invalidated — neither divs nor span::butt elements on the page will have a red background.
Normally that’s not a terribly huge problem. It may even be even useful, depending on the situation. But there are plenty of situations where it has kind of been a pain in the, uh, :butt.
Here's a classic:
::selection {
background: lightblue;
}For a long time, Firefox didn't understand that selector, and required a vendor prefix (::-moz-selection) to get the same effect. (This is no longer the case in Firefox 62+, but you take the point.)
In other words, this wasn't possible:
/* would break for everyone */
::selection, ::-moz-selection {
background: lightblue;
}That would break for browsers that understood ::selection and break for Firefox that only understood ::-moz-selection. It made it ripe territory for a preprocessor @mixin, that's for sure.
That was annoying enough that browsers have apparently fixed it. In a conversation with Estelle Weyl, I learned that this is being changed. She wrote in the MDN docs:
Generally, if there is an invalid pseudo-element or pseudo-class within in a chain or group of selectors, the whole selector list is invalid. If a pseudo-element (but not pseudo-class) has a
-webkit-prefix, As of Firefox 63, Blink, Webkit and Gecko browsers assume it is valid, not invalidating the selector list.
This isn't for any selector; it's specifically for pseudo-elements. That is, double colons (::).
Here's a test:
See the Pen Ignored Invalid Selecotrs??? by Chris Coyier (@chriscoyier) on CodePen.
I'd call that a positive change.
The post One Invalid Pseudo Selector Equals an Entire Ignored Selector appeared first on CSS-Tricks.
