::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:

• color
• background-color
• cursor
• outline
• text-decoration
• text-emphasis-color
• text-shadow

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

Browser compatibility

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