What You’ll Learn

The ::selection pseudo-element lets you style text when a user highlights it with the mouse, keyboard, or touch. It is a small detail that makes your site feel polished and on-brand.

Introduction

The CSS ::selection pseudo-element targets the portion of a document that a user has selected. When someone drags across a paragraph or uses Ctrl+A to select all text, your custom highlight colors appear instead of the browser’s default blue or gray.

This is a pseudo-element (note the double colon ::), similar to ::before and ::placeholder. It applies only to the selected text fragment, not the entire element.

Definition and Usage

Use ::selection to align highlighted text with your brand palette. Most developers set background-color and color for a clean, readable highlight. You can apply it globally or scope it to specific elements like code::selection or h1::selection.

📝 Syntax

The syntax for the ::selection pseudo-element is:

::selection {
  /* CSS properties */
}

You can also scope selection styles to a specific element:

p::selection {
  background-color: #2563eb;
  color: #ffffff;
}

Supported Properties

Only a limited set of CSS properties applies to ::selection:

Note: Properties like font-size, border, margin, and padding have no effect on selected text.

Syntax Rules

• Use the double-colon form ::selection (pseudo-element, not pseudo-class).
• Pair background-color with color for readable highlights.
• Scope with element selectors: h1::selection, code::selection.
• Add ::-moz-selection only if you need legacy Firefox support.
• Text with user-select: none cannot be highlighted.

Related Topics

• ::placeholder — another text-focused pseudo-element
• color — sets selected text color
• background-color — sets highlight fill
• user-select — controls whether text can be selected
• :root — store selection colors as CSS variables

When to Use ::selection

::selection is ideal for polishing text-heavy pages:

• Blog posts and articles — Match highlight colors to your brand palette.
• Documentation sites — Make code snippets stand out when copied.
• Landing pages — Small UX detail that signals attention to design.
• Dark themes — Use a softer highlight that works on dark backgrounds.
• Educational content — Help learners see what they have selected clearly.

Examples Gallery

Practice ::selection with basic highlights, brand colors, scoped element styles, and code-block selection.

::selection {
  background-color: #fef08a;
  color: #1e293b;
}

::-moz-selection {
  background-color: #fef08a;
  color: #1e293b;
}

::selection {
  background-color: #2563eb;
  color: #ffffff;
}

h1::selection {
  background-color: #16a34a;
  color: #ffffff;
}

p::selection {
  background-color: #2563eb;
  color: #ffffff;
}

code::selection {
  background-color: #1e293b;
  color: #f8fafc;
}

code {
  font-family: ui-monospace, monospace;
  background: #f1f5f9;
  padding: 0.15rem 0.35rem;
  border-radius: 0.25rem;
}

💬 Usage Tips

• Use contrasting colors — Light text on a dark highlight (or vice versa) keeps selected text readable.
• Keep it subtle — A soft tint often feels better than a loud neon highlight on long articles.
• Store in :root — Define --selection-bg and --selection-color as CSS variables for easy theming.
• Scope when needed — Use code::selection or .article::selection for context-specific highlights.
• Test on dark backgrounds — Default blue highlights can clash; pick colors that work on your page background.
• Stick to allowed properties — color and background-color are the most reliable across browsers.

⚠️ Common Pitfalls

• Unsupported properties — font-size, border, and padding do not apply to ::selection.
• Low contrast — Pale yellow on white or light gray on white can make selected text hard to read.
• user-select: none — Elements with this property cannot be selected; ::selection has no effect.
• Images and icons — ::selection styles text, not images or SVG graphics.
• Single colon typo — Use ::selection (pseudo-element), not :selection.
• Overriding with !important — Rarely needed; a well-placed scoped rule is usually enough.

♿ Accessibility

• Maintain contrast — Selected text should meet WCAG contrast guidelines against the highlight background.
• Do not disable selection — Avoid user-select: none on body copy; users need to copy text.
• Keyboard users — Selection styles apply to keyboard-driven highlights (Shift+arrows, Ctrl+A) as well as mouse selection.
• High-contrast mode — Test that custom highlights remain visible when OS high-contrast settings are enabled.
• Do not rely on color alone — Selection is a visual affordance; ensure content is readable without custom highlight colors.

💡 Best Practices