The Shifting Line Between CSS States and JavaScript Events

CSS pseudo-classes increasingly mirror JavaScript event listeners, allowing developers to handle UI states without writing JS. The post maps common pseudo-classes (:hover, :focus, :checked, :valid, :target, media element states, popover/dialog states) to their JavaScript event equivalents, explaining the nuances between them. It also previews the upcoming `event-trigger` CSS spec — not yet supported in any browser — which would let CSS directly listen for click, touch, keypress, and other events to trigger animations, including cross-element triggering and stateful forward/backward animation control.