Home » Programming » Css » Selection Pseudo Element
📍 Unpin 🔗 Copy Link 📋 Copy Markdown ⬇️ Download
1 min read

CSS ::selection Pseudo-element

The ::selection pseudo-element applies styles to the portion of a document that has been highlighted by the user (such as clicking and dragging the mouse across text).

1. Syntax

::selection {
  /* styles */
}

You can also target the selection within specific elements:

p::selection {
  background: yellow;
  color: black;
}

2. Allowed Properties

Only a small subset of CSS properties can be used with ::selection to prevent layout reflows:

  • color
  • background-color
  • text-decoration (and related properties like text-decoration-color)
  • text-shadow
  • stroke-color, fill-color, stroke-width
  • cursor
  • caret-color
  • outline

Properties like font-size, margin, or padding are ignored.

3. Basic Usage

/* Global selection style */
::selection {
  background-color: <a href='/?search=%23ff4081' class='obsidian-tag'>#ff4081</a>; /* Pink background */
  color: white;              /* White text */
}

programming/css/css programming/css/pseudo-classes-and-pseudo-elements

Created: March 17, 2026 • Last Modified: February 1, 2026