::selection

Use your cursor select this sentence. Notice how as you select the text a background color fills the space? You can change the background color and color of selected text by styling ::selection. Styling this pseudo element is great for matching user-selected text to your sites color scheme.

p::selection {
  background: #fff;
  color: #ff0000;
}

Take note that the double colon is necessary in the syntax for this pseudo element, despite that other pseudo-elements accept a single colon.

As seen above, you can style ::selection on individual elements. You can also style the entire page by dropping the bare pseudo-element in your stylesheet.

::selection { background: yellow; }

There are only three properties that ::selection will work with:

• color
• background (specifically the background-color, background-image longhand properties)
• text-shadow

If you try to style ::selection with a property that’s not on the list, then that property will be ignored. It may be tricky seeing background in that list because the property will only render a color when used on ::selection and it won’t render a background image or gradient.

Also don’t try this:

p::-moz-selection,
p::selection { color: red; }

When browsers find a part of a select they don’t understand, they drop the entire thing, so this will fail all the time.

One of the most helpful uses for ::selection is turning off a text-shadow during selection. A text-shadow can clash with the selection’s background color and make the text difficult to read. Set text-shadow: none; to make text clear and easy to read during selection.

Fancy ::selection

Paired with Sass, or any other preprocessor, you can make really cool effects with ::selection. Select the text in the demo below:

You might notice the effect is not so smooth in some browsers. Let’s file that demo under: things that are possible, but probably just for fun.

Another dumb-but-fun little trick is revealing an image through selected text.

Browser support

More information

• CSS Pseudo-Elements Module Level 4 specification
• MDN

Related