::selection

Summary

The ::selection CSS pseudo-element applies rules to the portion of a document that has been highlighted (e.g. selected with the mouse or another pointing device) by the user.

Only a small subset of CSS properties can be used in a rule using ::selection in its selector: color, background-color, cursor, outline, text-decoration, text-emphasis-color and text-shadow. Note that, in particular, background-image is ignored, like any other property.

Example

Gecko is the only engine requiring the prefix. Due to the fact that the CSS parsing rules require dropping the whole rule when encountering an invalid pseudo-element, two separate rules must be written: ::-moz-selection, ::selection {...}. The rule would be dropped on non-Gecko browsers as ::-moz-selection is invalid on them.

HTML

<div>This is some text for you to test CSS's ::selection pseudo-class.</div>
<p>Also try to select some text in this &lt;p&gt;</p>

CSS

/* draw any selected text yellow on red background */
::-moz-selection {
  color: gold; background: red;
}

::selection {
  color: gold; background: red;
} 

/* draw selected text in a paragraph white on black */
p::-moz-selection {
  color: white;
  background: black;
}

p::selection {
  color: white;
  background: black;
}

Output

Specifications

The ::selection CSS pseudo-element was drafted for CSS Selectors Level 3 but removed before it reached the Recommendation status. It was readded as part of the Pseudo-Elements Level 4 draft.

Browser compatibility

[1] Gecko currently only supports the prefixed version ::-moz-selection. It will be unprefixed in bug 509958.