CSS - The ::Selection Pseudo-Element

The following example makes the selected text red on a yellow background:

HTML file:	Displayed by browser:
<style> ::-moz-selection { /* Code for Firefox */ color: red; background: yellow; } ::selection { color: red; background: yellow; } </style> <body> <h1>Select some text on this page:</h1> <p>This is a paragraph.</p> <div>This is some text in a div element.</div> </body>	Select some text on this page: This is a paragraph. This is some text in a div element.

HTML file:

Displayed by browser:

<body>
<h1>Select some text on this page:</h1>
<p>This is a paragraph.</p>
<div>This is some text in a div element.</div>
</body>

Select some text on this page:

This is a paragraph.

This is some text in a div element.

The ::selection pseudo-element matches the portion of an element that is selected by a user. The following CSS properties can be applied to this pseudo-element:

color
background
cursor
outline

Firefox supports an alternative, the ::-moz-selection property. Note: ::selection is not supported in Internet Explorer 8 and earlier versions.