The gist is that: 1. Highlight Styles now inherit _regular_...

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.

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

3 comments

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