What is the ::selection pseudo-element used for?

Q: What is the ::selection pseudo-element used for?

The `::selection` pseudo-element in CSS allows you to style the portion of text that a user highlights (selects) with their cursor. It provides a way to customize the appearance of selected text, such as changing its background color, text color, or adding other visual effects. `::selection` applies only to the text a user selects. You can style properties like `color`, `background-color`, `text-shadow`, and `cursor`. Not all CSS properties are supported; mainly visual text properties work. It works on most elements that contain selectable text. p::selection { background-color: dodgerblue; color: white; text-shadow: 1px 1px 2px rgba(0,0,0,0.3); } Try selecting this paragraph to see the custom selection style. In this example, when the user selects the paragraph text, the background changes to blue, the text color becomes white, and a subtle text shadow is applied, enhancing the visual feedback of text selection. Use `::selection` to improve user experience and match your site's color scheme. Keep contrast high for readability when styling selections. Test across different browsers, as some older browsers may have limited support. Avoid adding complex animations or non-text styles, as these are not supported.

Difficulty: 3/10

CSS pseudo-elements, user selection styling, cross-browser consistency

Using the ::selection Pseudo-Element in CSS

The ::selection pseudo-element in CSS allows you to style the portion of text that a user highlights (selects) with their cursor. It provides a way to customize the appearance of selected text, such as changing its background color, text color, or adding other visual effects.

Key Points

1
::selection applies only to the text a user selects.
2
You can style properties like color, background-color, text-shadow, and cursor.
3
Not all CSS properties are supported; mainly visual text properties work.

Example: Styling Selected Text

In this example, when the user selects the paragraph text, the background changes to blue, the text color becomes white, and a subtle text shadow is applied, enhancing the visual feedback of text selection.

Best Practices

1
Use ::selection to improve user experience and match your site's color scheme.
2
Keep contrast high for readability when styling selections.
3
Test across different browsers, as some older browsers may have limited support.
4
Avoid adding complex animations or non-text styles, as these are not supported.

Scenario Questions

0-2 years experience

2-5 years experience

1Our app has a dark mode theme, and when users highlight text, the selection becomes unreadable—how would you debug and fix this?

Follow-up Questions