I’m already working on a solution to this! I don’t think we can handle JS events the same way we handle CSS pseudo-classes, but the elementqueries.com syntax could easily be extended to include JS events!
How EQCSS works is CSS styles are scoped to a selector, the plugin adds a unique identifier to each element with queries on it, JS watches the page, and when the query condition is met, it adds a <style> tag to the end of the page with CSS written for the unique identifier of the element that matches the query. For a more in depth explanation of the workings of the plugin, check out the technical documentation: https://github.com/eqcss/eqcss/wiki/EQCSS-1.0.0-~-Technical-documentation
Now, how to handle CSS for events? I propose a syntax like this:
@element 'button' and (event: click) {
body {
background: red;
}
}
But I’m not sure which syntax looks better:
@element 'button' and (click) {}
@element 'button' and (onclick) {}
@element 'button' and (event: click) {}
Unlike CSS pseudo-classes, like :hover which CSS applies and then also removes, there is no way the browser would know to remove the styles from the click query.
Imagine you have code like this:
<input>
<style>
@element 'input' and (event: keydown) {
$this {
background: red;
}
}
</style>
After pressing a key, the bottom of your page might look like this:
<input data-EQCSS_1>
...
<style>
[data-EQCSS_1] {
background: red;
}
</style>
Now suppose you added a keyup event as well:
<input>
<style>
@element 'input' and (event: keydown) {
$this {
background: red;
}
}
@element 'input' and (event: keyup) {
$this {
background: lime;
}
}
</style>
Let’s say you press a keyboard key twice, here’s what the bottom of the page would look like:
<input data-EQCSS_1>
...
<style>
[data-EQCSS_1] {
background: red;
}
[data-EQCSS_1] {
background: lime;
}
[data-EQCSS_1] {
background: red;
}
[data-EQCSS_1] {
background: lime;
}
</style>
Resulting in the last keyup condition’s style being the one that applies. This is closer to how JavaScript events apply CSS styles to elements when you’re working with JS - but you’re right, it sure would be nice to write those CSS styles in a CSS-like syntax.
I was going to make EQCSS v.1.2.0 all about performance enhancements - but if you want to explore adding conditions for events on elements then I can definitely boost the priority of that feature.
Also, note how instead of applying to just one element, in my proposed syntax it acts as a container query, like a @media query it could hold multiple sets of CSS rules applying to many different elements on the page, not just the element that meets the condition.
Let me know what you think, we’ve already got the hard part of this polyfill/plugin done! This is just another feature we can add on top 
(How I think EQCSS would implement the functionality in JavaScript is when it parsed the EQCSS syntax it would add an addEventListener() for that event on that element. When the listener fires would be when that specific CSS would be appended to the page)
). For example, why don’t we have something like click in CSS? For example, when we have an information block on the page with close button, we still use some JS to close it. To emulate some click behavior we can do something like
