MDN wants to learn about developers like you:

This is an experimental technology
Check the Browser compatibility table carefully before using this in production.

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).

::selection {
  background: cyan;

Allowable properties

Only a small subset of CSS properties can be used in a rule with ::selection in its selector:

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


/* Firefox syntax */




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


/* 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;



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). It was brought back in Pseudo-Elements Level 4.

Browser compatibility

FeatureChromeEdgeFirefoxInternet ExplorerOperaSafari
Basic support1 Yes1 -moz- 99.51.1
FeatureAndroid webviewChrome for AndroidEdge mobileFirefox for AndroidOpera AndroidiOS SafariSamsung Internet
Basic support ? ? Yes ? ? ? ?

Document Tags and Contributors

 Last updated by: fscholz,