Selecting content on a web page - whether by mouse, touch, gesture or stylus - always precedes copying or editing it. Content is highlighted in a light blue by most browsers by default, but CSS provides a way of customizing this:

::selection specifies the way that selected elements appear. Like ::visited, it can only affect the value of a few properties: color, background (or separately, background-color and background-image) and text-shadow. For example, this will change the background of every selected element to red:

::selection { background: red; }

::selection can also be limited to certain elements: in the following example, the appearance of <h1> elements changes during selection.

h1::selection { background: red; }

Do make sure that if you are changing the ::selection background that you preserve the text contrast ratio; the browser will not do this automatically for you. As an example, for black text with a dark ::selection background, change the selected text to white:

h1::moz-selection { background: black; color: white; }
h1::selection { background: black; color: white; }

An interesting variation was used by Viljami Salminen, one shown at the top of this article: reversing the color, but keeping the ::selection background transparent, and stroking the outline of the text. Since only Webkit-derived browsers support text-stroke, we have to cover Firefox first:

h1::-moz-selection {
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000,
	 -1px 1px 0 #000, 1px 1px 0 #000;
  background: transparent;
}

Then, the special declaration for Chrome, Safari and Opera:

h1::selection {
   text-shadow: none;
    -webkit-text-stroke: 1px #000;
  background: transparent;
}

::selection can also be paired with the window-inactive state to determine how the selected content should appear when the browser window loses focus:

::selection:window-inactive {
  background:rgba(0,0,0,0.3);
}

Enjoy this piece? I invite you to follow me at twitter.com/dudleystorey to learn more.
Check out the CodePen demo for this article at https://codepen.io/dudleystorey/pen/LZxEvX