2. Excluded from 1 are _custom_ Properties. Those inherit...

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.

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

2 comments

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