demo · v134

Highlight Inheritance

Select text inside the nested articles below. Pre-134, ::selection styling was applied per-element and you had to repeat the rule at every nesting level if you wanted to change colour. Post-134, ::selection inherits through the highlight pseudo chain — set it once on the parent and the nested children pick it up automatically.

probing...

Try it

Select any of the text inside the nested blocks. The outer rule is the only ::selection declaration; the inner block inherits it (post-134 behaviour).

Outer article. Highlight rule lives here only.

Nested article. With v134's inheritance, the highlight from the parent reaches here without being redeclared.

Deeper still. Same story — no repeated ::selection rule needed.

The code

/* v134 lets you write this once: */
.stage {
  --hl-bg: gold;
  --hl-fg: black;
}
.stage ::selection {
  background: var(--hl-bg);
  color: var(--hl-fg);
}
/* Nested elements inherit through the highlight chain.
   Pre-134 you'd have to repeat the rule per-level. */

see also