[csswg-drafts] [css-variables][css-pseudo] Question about setting variable values in pseudo classes (#10778)

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

== [css-variables][css-pseudo] Question about setting variable values in pseudo classes ==
My colleague and I are trying to figure out if this is a browser bug (in all browsers) or an exception in a standard.

Let's say we have HTML

```HTML
<a href="https://codepen.io/">Codepen</a>
```

and CSS

```CSS
:root {
  --color: red;
}

a {
  color: var(--color);
}

a:hover {
  --color: green;
}

a:visited {
  --color: purple;
}
```

As the link is visited and last setting of `--color` is `purple`, the color of the text in the link should be purple. Except it's not, it remains `red`.

If this behavior with `:visited` was consistent with all pseudo-classes, I wouldn't question it as in the [spec](https://drafts.csswg.org/css-variables-2/#defining-variables) is written that variables apply to all elements and all pseudo-elements. On hover the text turns `green` with the code above in Firefox, Chrome and Safari.

[Codepen example](https://codepen.io/xgebi/pen/JjQZbJm)

My question is, is ignoring the setting of `--color` in `a:visited` a standards bug or should we make reports to browsers' issue trackers?


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


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

Received on Monday, 26 August 2024 12:09:43 UTC