v134 · css

Themed Selection

Select text on this page, then switch themes. The :root::selection colour is declared once using root CSS custom properties. With highlight inheritance, that single rule propagates through the highlight chain to all nested elements — blockquote, code, em, any depth — without re-declaring ::selection at each level.

Behavioral probe: checking…

Selection theme:

Select any text below to see the themed :root::selection no selection

CSS Highlight Inheritance changes how selected text propagates styles

Chrome 134 · CSS Pseudo-Elements Level 4

Before this change, ::selection styles had to be re-declared at every nesting level to ensure consistent behaviour. If you defined a custom selection colour on :root, it would apply to direct text content but might not propagate to text inside nested elements like <strong>, <em>, or <code>.

This is a blockquote-style note. Before highlight inheritance, you often had to write ::selection, .note::selection { … } to keep the selection style consistent here.

The fix is elegant: instead of inheriting through the element tree (where a child element might reset the cascade), highlight pseudo-element styles now inherit through the highlight pseudo chain. This means a single :root::selection { background: … } is enough for the entire document.

This makes design-system theming of selection much cleaner. Change one CSS variable and the selection colour updates everywhere — in paragraphs, inside code blocks, inside callouts, anywhere on the page.

Same :root::selection rule applies at all nesting levels — select each block

level 1 — plain text

Select this paragraph text. The :root::selection rule applies here via highlight inheritance.

level 2 — inside a styled container

Same theme applies here too — inside a box with its own background. No need for .nest-level-2::selection { … }.

level 3 — deeply nested, inside blockquote-like box

And here at the deepest level. All three use the single root :root::selection rule — the highlight chain inherits it without you re-declaring it anywhere.

Pre-134 vs Chrome 134+

Pre-Chrome 134

::selection did not inherit through the highlight pseudo chain — it inherited through the element tree, which could be reset by nested element styles. To reliably theme selection across an entire page authors wrote something like: *, *::before, *::after { ::selection { … } } which was verbose and fragile.

Chrome 134+

One root :root::selection { background: var(--sel-bg); color: var(--sel-fg); } declaration is sufficient. Update the root CSS variables and the selection theme propagates through every element and every nesting level automatically — because the highlight pseudo chain carries the values down.

/* Theme variables — change these to retheme selection everywhere */
:root {
  --sel-bg: var(--text-black);
  --sel-fg: var(--bg-ivory);
}

/* ONE root rule — highlight inheritance takes it everywhere */
:root::selection {
  background: var(--sel-bg);
  color: var(--sel-fg);
}

/* Theme switch: just override the root variables */
:root[data-selection-theme="blue"]    { --sel-bg: var(--accent-blue);    --sel-fg: var(--bg-ivory); }
:root[data-selection-theme="emerald"] { --sel-bg: var(--accent-emerald); --sel-fg: var(--text-black); }
:root[data-selection-theme="rose"]    { --sel-bg: var(--accent-rose);    --sel-fg: var(--bg-ivory); }

/*
  Without highlight inheritance (pre-Chrome 134):
  had to repeat this for every nesting context:

  :root::selection,
  .note::selection,
  code::selection,
  em::selection,
  strong::selection { … }
*/

CSS Highlight Inheritance changes how selected text propagates styles

Pre-134 vs Chrome 134+

see also