Email or username:

Password:

Forgot your password?
Bramus's posts Post Back to profile
Bramus

If you are using `::selection` styles on your website, be sure to read this post.

developer.chrome.com/blog/sele

Easiest way to understand the change is to try the included demo (which I provided) in Chrome 131 and compare that to the old situation.

toot.cafe/@seaotta/11327756123

9 October at 15:59 | Open on front-end.social
4 comments
Bramus

The gist is that:

1. Highlight Styles now inherit _regular_ CSS properties through the pseudo highlight chain, rather than the element chain.

This means you can set `main::selection` to set highlight styles for `main` + all its descendants. Before it was only `main` that would get the styles.

9 October at 16:00 | Open on front-end.social
Bramus

2. Excluded from 1 are _custom_ Properties. Those inherit from the originating element.

That way you can access custom props declared on `:root` from within `::selection { … }` but also that you can change a customprop on an element and the `::selection` will use the new value.

9 October at 16:00 | Open on front-end.social
Bramus

Practically this means you need to write your styles as follows:

```css
/* Regular props = target the element’s ::selection */
main::selection {
color: red;
}

/* Custom props = target *::selection */
::selection {
background: var(--bg, transparent);
}
```

9 October at 16:00 | Open on front-end.social
Bramus

For compat with the old model, duplicate the CSSStyleRule with the regular props, and change the selector so that it matches all children of the element you are targeting.

```css
/* Compat with old model */
main *::selection {
color: red;
}
```

This approach will work in most cases.

9 October at 16:01 | Open on front-end.social
Go Up