CSS ::selection Pseudo-Element

CSS ::selection Pseudo-Element

The ::selection pseudo-element styles the portion of an element's text that a user selects with a mouse, touch gesture, or keyboard. It allows developers to customize the selected text color, background color, and supported text decorations without changing the original content.

Syntax

selector::selection {
  property: value;
}

The selector identifies the element whose selected text should receive the styling.

The ::selection pseudo-element represents the highlighted portion of the text.

For example:

p::selection {
  color: #fff;
  background-color: #0066cc;
}

This rule displays selected paragraph text in white with a blue background.

The selector can also be used without an element name:

::selection {
  color: #fff;
  background-color: #0066cc;
}

This applies the selection styling throughout the document unless another applicable rule overrides it.

The ::selection pseudo-element does not accept arguments or use parentheses.

How It Works

Browsers normally highlight text when a user selects it.

Selection can occur when a user drags the pointer across text or uses keyboard commands such as holding Shift while pressing the arrow keys.

By default, browsers choose the highlight colors.

The ::selection pseudo-element allows developers to customize those colors and certain other text properties.

For example:

article::selection {
  background-color: #ffeb99;
  color: #222;
}

When text inside the article is selected, the browser displays the selected portion with a light yellow background and dark text.

The unselected text retains its normal appearance.

The pseudo-element does not modify the document's text or create additional HTML elements.

Selection styling is temporary and changes as the user selects or deselects text.

Styling All Selected Text

To customize text selection throughout a webpage, use ::selection without an element selector.

For example:

::selection {
  background-color: #0066cc;
  color: #fff;
}

This applies a blue background and white text to selected content across the page.

Global selection styling is useful when maintaining a consistent visual design.

More specific selection rules can override the global styling for particular elements.

For example:

::selection {
  background-color: #0066cc;
  color: #fff;
}
code::selection {
  background-color: #ffeb99;
  color: #222;
}

Most selected text uses the blue and white color combination.

Selected text inside <code> elements uses the yellow and dark text combination.

Styling Specific Elements

The ::selection pseudo-element can be combined with element, class, and ID selectors.

For example:

h2::selection {
  background-color: #333;
  color: #fff;
}
p::selection {
  background-color: #cce5ff;
  color: #222;
}

Selected second-level headings use a dark background with white text.

Selected paragraph text uses a light blue background with dark text.

A class selector can target a specific area:

.important-text::selection {
  background-color: #ffcc00;
  color: #222;
}

Only selected text within elements with the important-text class receives this custom styling.

An ID selector can target a particular element:

#introduction::selection {
  background-color: #0066cc;
  color: #fff;
}

Using specific selectors allows different parts of a webpage to have different selection appearances.

Text and Background Colors

The most common properties used with ::selection are color and background-color.

The color property changes the selected text color.

The background-color property changes the highlight behind the selected text.

For example:

::selection {
  color: #fff;
  background-color: #0066cc;
}

This creates white selected text on a blue background.

A lighter color combination can also be used:

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

This creates dark selected text on a light yellow background.

Both colors should provide sufficient contrast so the selected text remains readable.

When only one color is specified, the browser determines the other color according to the applicable highlight color rules.

For predictable results, define both color and background-color.

Text Decorations

The ::selection pseudo-element also supports certain text decoration properties.

For example:

p::selection {
  color: #fff;
  background-color: #0066cc;
  text-decoration-line: underline;
  text-decoration-color: #fff;
  text-decoration-thickness: 2px;
}

This adds a white underline to selected paragraph text.

The underline provides another visual indication of the selection.

A text shadow can also be applied:

p::selection {
  color: #fff;
  background-color: #0066cc;
  text-shadow: 1px 1px 1px #333;
}

The text-shadow property adds a shadow to the selected text.

Text decorations should remain subtle enough to preserve readability.

Properties that alter the layout of the text, such as padding and margin, do not apply to the selection highlight.

Example

The following example demonstrates different selection colors for a heading, paragraph, and code sample.

HTML:

<div class="selection-demo">
  <h3>HTML and CSS</h3>
  <p>HTML defines the structure of a webpage. CSS controls its appearance and layout.</p>
  <code>color: #0066cc;</code>
</div>

CSS:

.selection-demo h3::selection {
  color: #fff;
  background-color: #333;
}
.selection-demo p::selection {
  color: #fff;
  background-color: #0066cc;
}
.selection-demo code::selection {
  color: #222;
  background-color: #ffeb99;
}

Try it: Click and drag across each line of text to see its selection colors.

Selected heading text appears white on a dark background.

Selected paragraph text appears white on a blue background.

Selected code text appears dark on a light yellow background.

Drag across different elements to compare their selection colors.

The styles disappear when the text is no longer selected.

This example uses native browser text selection and requires no JavaScript.

Highlight Inheritance

The ::selection pseudo-element follows the CSS highlight inheritance model.

Highlight pseudo-elements can inherit applicable properties from both their originating elements and highlight pseudo-elements associated with ancestor elements.

For example:

.content::selection {
  color: #fff;
  background-color: #0066cc;
}
.content p::selection {
  background-color: #ffeb99;
}

The paragraph selection uses the light yellow background declared by its own rule.

The selected paragraph text can inherit the white text color from the ancestor selection highlight.

Because white text on a light yellow background is difficult to read, the paragraph should define its own text color:

.content p::selection {
  color: #222;
  background-color: #ffeb99;
}

This ensures the paragraph selection uses a readable combination of dark text and a light background.

Highlight inheritance differs from ordinary CSS inheritance and should be considered when combining global and element-specific selection rules.

Custom properties also require care because they inherit from the originating element rather than through the highlight inheritance chain.

::selection vs. ::search-text

The ::selection and ::search-text pseudo-elements both style highlighted text, but they respond to different user actions.

For example:

::selection {
  color: #fff;
  background-color: #0066cc;
}
::search-text {
  color: #222;
  background-color: #ffeb99;
}

The first rule changes the appearance of text selected by the user.

The second rule changes the appearance of browser search matches in supporting browsers.

Both pseudo-elements can be used on the same webpage.

Supported CSS Properties

The ::selection pseudo-element supports a limited set of CSS properties related to text highlighting.

For example:

::selection {
  color: #fff;
  background-color: #0066cc;
  text-decoration-line: underline;
  text-decoration-color: #fff;
}

Properties such as display, font-size, padding, margin, and border cannot be used to change the layout or box appearance of selected text.

Some text decoration behavior may vary between browsers.

Limitations

The ::selection pseudo-element has several limitations.

• It supports only a restricted set of CSS properties.
• It cannot change the layout or dimensions of selected text.
• It does not control which text the user can select.
• It does not provide JavaScript access to the selected text.
• It does not style browser Find in Page matches in the same way as ::search-text.
• Some browsers or operating systems may adjust selection appearance for accessibility.
• Selection styling may differ for form controls and browser-managed interfaces.

The ::selection pseudo-element only changes the visual presentation of the selection.

To control whether text can be selected, use the separate user-select property.

For example:

.non-selectable {
  user-select: none;
}

This prevents ordinary text selection for the selected element in supporting browsers.

Avoid disabling text selection for ordinary page content because it can interfere with copying text and other user interactions.

Accessibility Considerations

Selected text should remain easy to read and visually distinguishable from unselected content.

Follow these accessibility practices:

• Maintain sufficient contrast between selected text and its background.
• Avoid using similar colors for the foreground and background.
• Do not rely on selection color alone to communicate important information.
• Test selection styling in light and dark color schemes.
• Ensure selected text remains readable at different zoom levels.
• Avoid excessive text shadows or decorations that reduce readability.
• Preserve ordinary text selection and copying behavior.
• Test selection appearance with keyboard navigation and high-contrast settings.

For example:

::selection {
  color: #fff;
  background-color: #0050a4;
}

This provides a dark blue background with white selected text.

When a custom selection color would reduce accessibility, allowing the browser's default highlight appearance may be preferable.

Browser Support

The ::selection pseudo-element is widely available in modern browsers, including Chrome, Edge, Firefox, Safari, and Opera.

Basic support for changing selected text and background colors is well established.

Some supported text decoration properties may behave differently between browsers.

Modern browsers use the standard double-colon syntax:

::selection {
  color: #fff;
  background-color: #0066cc;
}

Older Firefox versions used the nonstandard ::-moz-selection selector:

::-moz-selection {
  color: #fff;
  background-color: #0066cc;
}

The prefixed selector is generally unnecessary for modern browser support.

For current compatibility information, visit Can I Use? and search for ::selection.

Specifications

The ::selection pseudo-element is defined in the CSS Pseudo-Elements Module Level 4 .

The specification defines selection highlighting, supported styling properties, and the highlight inheritance model.

Related highlight pseudo-elements include ::search-text, ::target-text, ::highlight(), ::spelling-error, and ::grammar-error.