CodeinWP CodeinWP

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:

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.

Update (Oct. 17, 2014): It’s coming back.

7 Responses

  1. Yannis Steriotis says:

    I really really LOVE the ::selection pseudo-element and I hope, I wish and I desperate want this specification would not be eliminate!

  2. Šime Vidas says:

    TR = Technical report

    • Okay, thank you, I’ll correct that.

      Of course, how is the “dev” version of the spec not qualified to be called a “technical report”? Just more bizarre jargon-filled goodness from the W3C I guess…

      • Šime Vidas says:

        From what I understand:

        Technical reports (BLUE LABEL) are part of the official W3C process (http://www.w3.org/2005/10/Process-20051014/tr). Publishing a technical report involves a bunch of steps like green-lighting the document by the corresponding working group and maybe even higher structures in the W3C, setting an official publication date, and other steps.

        On the other hand, “dev” drafts a.k.a. editor’s drafts (RED LABEL) don’t involve the above mentioned steps. They can be updated on a daily basis and there even exist a whole bunch of editor’s drafts that haven’t been published as technical reports. For instance, if a company like Google or Microsoft wants a particular feature standardized, it instructs one of its employees to write an editor’s draft. Once written, that draft serves as a proposal. If the W3C wants to have it standardized, it will eventually publish it as a technical report, but if not, the draft will remain just an editor’s draft.

  3. Francesco says:

    I love it too, and I think it’s important to stress that it is *very* useful when it comes to text-shadow: setting it to “none” (as the H5BP does) does make the text more readable.

  4. Great article! Also to note, ::selection does not apply to text inputs or textareas.

  5. It would be nice to have id added to one of the specs, but doubtful if the W3C will take a turn around on their stance.

Leave a Reply

Comment Rules: Please use a real name or alias. Keywords are not allowed in the "name" field and deep URLs are not allowed in the "Website" field. If you use keywords or deep URLs, your comment or URL will be removed. No foul language, please. Thank you for cooperating.

Markdown in use! Use `backticks` for inline code snippets and triple backticks at start and end for code blocks. You can also indent a code block four spaces. And no need to escape HTML, just type it correctly but make sure it's inside code delimeters (backticks or triple backticks).