That would be a drastic shift of the philosophy of CSS.
Which currently is:
(1) CSS holds no mutable state
(2) CSS selectors are all based on existing DOM/device state.
"On-click" is not a state, it's an event. CSS can't select an event. And toggling classes is new mutable state. CSS can't have mutable state.
Also you may be overstating the problem with this "so many needless use of JS". It's a tiny snippet you can add once and reuse it everywhere in your document.
document.addEventListener('click', e => {
let n = e.target;
do if (n.getAttribute?.('data-toggle') !== undefined) n.classList.toggle('on-click');
while (n = n.parentNode);
});
CSS hold mutable state see e.g CSS counters.
It's not just about concision, it's also about convenience (not need to do js at all) and about performance (no need to call the v8 engine, which is executed after css and has inherent, avoidable overhead)
You're talking about the performance of a click action. How many clicks a second do your users do? Millions?
Also counters aren't mutable state in the sense of a value changing in time. The "increment" name was chosen so it's intuitive. They're more like the nth-child selectors, where an attribute's value is determined by its position in a list of matching nodes (where the match is determined by the increment being specified in those elements).
