[csswg-drafts] [css-pseudo] Spec inconsistency on custom properties on highlight pseudo elements (#12763)

EricSL has just created a new issue for https://github.com/w3c/csswg-drafts:

== [css-pseudo] Spec inconsistency on custom properties on highlight pseudo elements ==
https://drafts.csswg.org/css-pseudo/#highlight-styling

The spec is confusing about custom properties on highlight pseudo elements, and I believe contradictory as well. These issues are in the latest version of the spec as well. The first part that I found confusing was this:

> The following properties apply to the highlight pseudo-elements:
> 
> - _[...]_
> - custom properties [CSS-VARIABLES-1]
>
> For any properties not listed above, but which are required to resolve the values of applicable properties, their computed values are copied from those of the originating element, ignoring any values specified on the highlight pseudo-element itself. For example:
>
> - _[...]_
> - custom properties [CSS-VARIABLES-1] (used in var() substitutions)

I think I know what was meant here. Custom properties are in the first list because they can be applied to highlight psuedo-elements. This means it is not accurate to say values specified on the highlight pseudo-element itself are ignored, as implied by their inclusion in the second list, but they were added to that list to explain that they inherit from the originating element like everything else on that list and unlike everything else on the first list. This is poorly written and I think would be clearer if it were removed from both lists but after each list explained how custom properties work.

Then the part of the spec that I'm pretty sure is wrong:

https://drafts.csswg.org/css-pseudo-4/#highlight-cascade

> #### EXAMPLE 13
> For example, if an author specified
> ```css
> :root {
>    --background-color: green;
>    --decoration-thickness: 10px;
>    --decoration-color: purple;
>  }
>  ::selection {
>    --decoration-thickness: 1px;
>    --decoration-color: green;
>  }
>  div::selection {
>    --decoration-color: blue;
>    background-color: var(--background-color, red);
>    text-decoration-line: underline;
>    text-decoration-style: line;
>    text-decoration-thickness: var(--decoration-thickness, 5px);
>    text-decoration-color: var(--decoration-color, red);
>  }
> ```
> The universal `::selection` uses the user-agent’s default styling because it only defines custom properties, with no properties that influence the appearance. A `div`’s selection highlight would apply a green background to the selected content, with a 10px thick blue underline. Since `--background-color` and `--decoration-thickness` custom properties are not specified on the `div::selection` peudo-element, they are inherited from its originating `div` element, which itself inherits the custom properties from the root. However since `--decoration-color` is specified on the `div::selection` itself, its value from the originating element is not used.

The spec claims the decoration thickness should be 10px and the color blue, reading custom properties from `div::selection` but not from `::selection`. It makes no sense to me that, where the `--decoration-color: blue;` declaration from `div::selection` applies, the `--decoration-thickness: 1px;` rule from `::selection` would not also apply. I tried this example in Chrome and saw a 1px blue underline, not 10px, contradicting the spec, but the spec doesn't make sense to me here.


Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/12763 using your GitHub account


-- 
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config

Received on Wednesday, 10 September 2025 08:58:42 UTC