[csswg-drafts] Allow triggering of native pseudo-classes for development purposes (#12202)

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

== Allow triggering of native pseudo-classes for development purposes ==
Browser devtools allow us to trigger native pseudo-classes like `:focus` or `:invalid`. This is great to have, but there are cases where we can't expect a user to open devtools.

A big use case is component catalogs and stories: designers and developers may need a page may need to show a component in many different states (ie, hovered, focused, invalid, etc.). If the component is only styled with pseudo-classes, this becomes impossible. To workaround this, any selector that uses a pseudoclass must also use a class or attribute to emulate the pseduo-class for stories. This is easier now with `:is()` and `:where()`, but it's cumbersome and leads to a little bloat.

It would be extremely useful to have some way to trigger pseudo-classes directly. Just an idea, but maybe it could be done via CSS:

```css
/* Select the element in the story */
#hover-disabled-story my-element {
  enabled-pseudo-classes: hover disabled
}
```


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


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

Received on Thursday, 15 May 2025 18:46:31 UTC