::selection

The ::selection CSS pseudo-element applies styles to the portion of a document that has been highlighted by the user (such as with the mouse).

Only a small subset of CSS properties can be used with the ::selection pseudo-element:

Note that, in particular, background-image is ignored.

Syntax

/* Firefox syntax */
::-moz-selection

::selection

Example

HTML

<div>This text has special styles when you highlight it.</div>
<p>Also try selecting text in this paragraph.</p>

CSS

/* Make selected text gold on a red background */
::-moz-selection {
  color: gold;
  background: red;
}

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

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

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

Result

Specifications

Specification Status Comment
CSS Pseudo-Elements Level 4
The definition of '::selection' in that specification.
Working Draft Initial definition

Note: Though ::selection was present in drafts of CSS Selectors Level 3, it was removed during the Candidate Recommendation phase because its behavior was under-specified (especially with nested elements) and interoperability wasn't achieved (based on discussion in the W3C Style mailing list). The ::selection pseudo-element was brought back in Pseudo-Elements Level 4.

Browser compatibility

Note: text-shadow in ::selection is supported by Chrome, Safari, and Firefox 17+.

Feature Chrome Edge Firefox (Gecko) Internet Explorer Opera Safari
Basic support 1 (Yes) 1.0 -moz[1] 9 9.5 1.1
Feature Android Chrome for Android Edge Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Basic support ? ? (Yes) ? ? ? ?

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

Document Tags and Contributors

 Last updated by: mfluehr,