CSS - ::selection
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.
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 <p></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
Description
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.
text-shadow
in ::selection
is supported by Chrome, Safari and Firefox 17+.
The
::selection
pseudo-element has been added again in Pseudo-Elements Level 4.Browser Compatibility
Feature | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari |
---|---|---|---|---|---|
Basic support | 1 | 1.0 -moz[1] | 9 | 9.5 | 1.1 |
Feature | Android | Chrome for Android | Firefox Mobile (Gecko) | IE Mobile | Opera Mobile | Safari Mobile |
---|---|---|---|---|---|---|
Basic support | ? | ? | ? | ? | ? | ? |
[1] Gecko currently only supports the prefixed version ::-moz-selection. It will be unprefixed in bug 509958.
Specifications
Specification | Status | Comment |
---|---|---|
CSS Pseudo-Elements Level 4 The definition of '::selection' in that specification. |
Working Draft | Initial definition |
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.
License
© 2016 Mozilla Contributors
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-us/docs/web/css/::selection