CSS has spent the last few years absorbing responsibilities that once belonged squarely to JavaScript. A recent CSS-Tricks piece lays out how a growing set of pseudo-classes now track user interaction states that closely mirror JavaScript events, even though pseudo-classes technically capture states rather than discrete events.
Familiar Ground: Hover, Active, and Focus
The article starts with the basics. :hover effectively spans the window between a pointerenter and pointerleave event, while :active behaves like pointerdown combined with pointerup or pointercancel. The pointer-events: none declaration can block pointer events from firing on an element entirely.
:focus lines up with the JavaScript focus and blur events, but :focus-visible adds browser heuristics on top, checking things like whether the user is navigating with a keyboard before deciding to show a focus indicator. Developers who need this logic in JavaScript can query it directly with element.matches(":focus-visible") inside a focus event listener.
Beyond Single Elements: :focus-within and :has()
:focus-within matches when any descendant of an element has focus, and :has() goes further by matching based on a relationship with any valid selector. According to the source, a rule like form:focus-within and form:has(:focus) can produce identical results, giving CSS a taste of the conditional logic JavaScript has always been better suited for.
Form Validation Gets Its Own Pseudo-Classes
Validation states get particular attention. :valid and :invalid fire immediately on form controls, but :user-valid and :user-invalid wait until a user has supplied input and moved on, closely tracking how the change event behaves for most input types. On the JavaScript side, developers still lean on checkValidity() and the ValidityState object to get more detail than the pseudo-classes alone provide. There is also an :autofill pseudo-class, notable because JavaScript has no clean, reliable way to detect autofilled fields.
Media Elements Are Next
The article flags new pseudo-classes for styling audio and video elements based on playback state without JavaScript listeners. Support is still early, recently landing in Firefox and not yet available in Chrome, but it is part of the Interop 2026 effort, suggesting broader browser support is coming.
Why This Matters for Site Builders
For WordPress theme and plugin developers, and for anyone maintaining custom front-end code on a hosted site, this shift means fewer event listeners are needed for common interaction patterns like validation feedback, focus styling, and form state changes. That can mean lighter JavaScript payloads and simpler maintenance, though teams should still test pseudo-class support across target browsers before removing JavaScript fallbacks.