What’s the Status of the ::selection Pseudo-element?

Ever since HTML5 Boilerplate put the ::selection pseudo-element on the map, so to speak, most CSS developers nowadays have been including this selector as part of their universal styles.

To get cross-browser support, the ::selection pseudo-element (which is used to change styles on highlighted, or selected, text) is declared like this:

::-moz-selection {
    color: white;
    background: hotpink;
}
::selection {
    color: white; 
    background: hotpink;
} 

All in-use browsers except IE7/8 support ::selection. As shown above, Firefox is the only browser that requires a vendor prefix and has done so for quite some time. Important to note is that the two declaration blocks above must be separate. In other words, you can’t utilize selector grouping to save a few lines.

Unfortunately, while ::selection is being used by so many developers, many may not realize that it’s actually not part of any specification.

What the Spec Currently Says

Let’s confirm this by looking at the selectors module, level 3. There used to be a place for ::selection in the spec, but now that spot on the page says:

This section intentionally left blank. (This section previously defined a ::selection pseudo-element.)

That’s the “TR” version of the spec (which stands for “technical report”; not that that means anything to anyone). The other version of the spec is the dev modules. But there’s no change, it says the same thing.

So basically, what this means is exactly what’s stated in MDN’s documentation on the subject: This is currently a “non-standard” feature.

Why is ::selection not in the spec?

As usual, MDN provides a much more complete explanation than does the official spec for the removal of ::selection (being told that the section is “intentionally left blank” isn’t exactly helpful). MDN explains:

Though this pseudo-element was in drafts of CSS Selectors Level 3, it was removed during the Candidate Recommendation phase, as it appeared that its behavior was under-specified, especially with nested elements, and interoperability wasn't achieved.

And it links to a 2008 thread on the W3C’s mailing list that discusses these problems.

Some Random Spec-related Notes on ::selection

There are a lot of tidbits surrounding this unique selector, which I summarize below:

• ::selection is not part of Selectors Level 4, suggesting even further that its future seems bleak.
• There was another discussion about ::selection in January 2012, discussing why it was dropped and presenting a new syntax which doesn’t seem to have gained any traction
• The CSS3 UI module has a section on pseudo-elements, and it too mentions the removal of ::selection
• As of this writing, ::selection is still part of HTML5 Boilerplate’s main.css file
• When discussing its removal from H5BP, Paul Irish responded: “h5bp is a manifestation of practical frontend development. w3c specification status has little bearing on what features live in the project.”

Some Technical Notes on use of ::selection

Despite its shaky future, many people seem to like it. Others feel it messes too much with something that the browser alone should control. Nonetheless, here are some things to know about it:

• The only properties that can be used inside a ::selection selector are color, background, background-color and text-shadow
• Although background works, background-image does not.
• Because ::selection is non-standard and doesn’t look to have much of a future, Firefox will probably never support the standard syntax.
• ::selection will not work with the single-colon syntax; as of CSS3, all new pseudo-elements use double-colon syntax, to differentiate them from pseudo-classes.

Conclusion

I like ::selection. It gives an extra bit of branding to a site’s design and it works almost like a little easter egg (which isn’t always a good thing).

More than likely, browsers will continue to support it for quite some time. I think the only thing that would remove it is if a serious accessibility issue was discovered and the W3C put pressure on browsers to have it chopped.

So my advice is: Use it, but don’t be surprised if one day it stops working in later browser versions. No big loss, it degrades gracefully.

If anyone has any further info on ::selection, I’d be glad to make any corrections/additions to this post.