CSS Reference Pseudo-class

::selection

The ::selection CSS pseudo-element represents a portion of the document that is highlighted by the user. For example, a portion of a page that is selected by the user using the mouse or any other pointing device.

selection-default
In most browsers, selected content has a blue background color by default. Using ::selection, you can change that to match the overall style or theme of the page.

Only a subset of all CSS properties can be used to style a ::selection, namely the CSS color, background-color, and text-shadow properties.

You can also use the background shorthand property to style a selection, too. However, the background images are not supported, and will be ignored. So the background shorthand can basically only be used to specify a background color.

Trivia & Notes

The ::selection pseudo-element was drafted for CSS Selectors Level 3 but was removed before it reached the Candidate Recommendation status, and it is currently not part of any CSS module on the standards track. However, it is still implemented in most browsers, and is likely to remain so.

Examples

The following example sets the foreground and background colors of any selected portion of a page:

::selection {
    background-color: #222;
    color: white;
}
                

The following example sets the foreground and background colors of text highlighted in a blockquote:

blockquote::selection {
    background-color: #aaa;
    color: white;
}
                

Live Demo

Have a look at the live demo:

View this demo on the Codrops Playground

Browser Support

The ::selection pseudo-element is supported in Chrome, Safari, Opera, and Internet Explorer 9+.

Firefox supports it prefixed with the -moz- prefix, in the form: ::-moz-selection.

Using text-shadow in ::selection is only supported in Chrome, Safari, Opera, nd Firefox.

Written by

Last updated February 3, 2015 at 12:33 pm by Mary Lou

Do you have a suggestion, question or want to contribute? Submit an issue.