You know how you can style (to some degree) selected text with ::selection
? Well, Jeff Starr uncovered a heck of a weird CSS bug.
If you:
- Leave that selector empty
- Link it from an external stylesheet (rather than
<style>
block)
Selecting text will have no style at all. 😳😬😕
In other words, if you <link rel="stylesheet" ...>
up some CSS that includes these empty selectors:
::-moz-selection {
}
::selection {
}
Then text appears to be un-selectable. You actually can still select the text, so it’s a bit like you did ::selection { background: transparent; }
rather than user-select: none;
.
The fact that it behaves that way in most browsers (Safari being a lone exception) makes it seems like that’s how it is specced, but I’m calling it a bug. A selector with zero properties in it should essentially be ignored, rather than doing something so heavy-handed.
Jeff made a demo. I did as well to confirm it.
See the Pen
Invisible Text Selection Bug by Chris Coyier (@chriscoyier)
on CodePen.
Seems like it’s really a bug, the spec says:
same effect if you have
It appears this way in Chrome on Android as well.
This pseudo element has more strange side effects that one might think. For example it doesn’t conform to the specificity-rules as one might expect.
code example
I see nothing wrong in the behavior of your example. Styles assigned directly to the element always override those inherited from the parent, regardless the way they were assigned to that parent. The only part that might be not very intuitive is that
::selection
of the nested element is considered child of the::selection
of the parent element.@Ilya Streltsyn,
this might help you understand what I mean. Moreover, there is a new bug in Chromium regarding this same behavior.
In Edge, the text is visibly selected in the default color.
FYI:
Works as expected (selecting selects) in:
Safari: 11.1.2 (11605.3.8.1)
Mac: 10.11.6 (El Capitan)
Great timing of the article. I just ran into this myself on a personal project. For what it’s worth, the issue also crops up when you specify a property with an invalid value. i.e.:
Have to pay attention when using snippets in VS Code :)