Adding a :on-click pseudo selector would remove so many needless use of js for dynamically changing classes.
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.
https://jsfiddle.net/y1qv069p/5/
document.addEventListener('click', e => {
let n = e.target;
do if (n.getAttribute?.('data-toggle') !== undefined) n.classList.toggle('on-click');
while (n = n.parentNode);
});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).
div {
behavior:check;
}
div:checked {
color:red;
}
CSS: CSS 2.1 in full + some most popular CSS3 modules like transition, animation, transform, etc.
CSS flex and grid are supported but in Sciter specification, see: https://terrainformatica.com/2018/12/11/10-years-of-flexboxi...
JavaScript: ES2020 specification in full + native JSX and Reactor, see: https://sciter.com/tutorials/reactor-hello-world/
JavaScript runtime:
+ most popular and used JS DOM APIs
+ Node.JS runtime: FS, Net, Process
+ Desktop specific runtime, for example HTML Windows (https://sciter.com/html-window/), components (https://sciter.com/tutorial-learn-sciters-html-components-in...), etc.