v147 · CSS · Events

Pseudo target on events

UIEvent, AnimationEvent, and TransitionEvent now expose a .pseudoTarget property — when the event originates from a CSS pseudo-element (::before, ::after, ::marker, …) it returns the CSSPseudoElement instead of null.

concepts

  1. Pseudo-element Click Lab

    A grid of styled elements with ::before and ::after decorations. Click anywhere — the event log shows whether event.pseudoTarget returns a CSSPseudoElement or null, making the click origin unambiguous.

  2. Animation Origin Tracker

    Kick off CSS animations on elements and their pseudo-elements simultaneously. An animationend listener reads .pseudoTarget to attribute each event to the exact layer — element or ::before or ::after — without any extra DOM wrappers.

  3. Pseudo-element Event Tree Explorer

    Click elements that have ::before, ::after, and ::marker pseudo-elements. The event inspector shows event.pseudoTarget vs event.target live, and tallies how many clicks originated from each pseudo-element type.

  4. Tooltip Reveal

    Tooltips built entirely in ::after pseudo-elements. When the tooltip's transitionend fires, event.pseudoTarget identifies it came from ::after — the handler locks the tooltip green to confirm receipt, demonstrating pseudoTarget on TransitionEvent.

  5. Compatibility Lab

    Detects event.pseudoTarget on UIEvent, AnimationEvent, and TransitionEvent. Click a card with ::before/::after decorators and watch whether pseudoTarget resolves a CSSPseudoElement — or falls back to geometry checks via Element.pseudo().

why it shipped

CSS pseudo-elements (::before, ::after, ::marker, ::first-letter) are rendered by the browser but have no DOM node. When a user clicked on a ::before decoration, event.target always pointed at the originating element — you had to use geometry checks or pointer-events tricks to guess whether the pseudo-element was involved. .pseudoTarget fills that gap: when the event originates from a pseudo-element, .pseudoTarget is the CSSPseudoElement returned by Element.pseudo(); otherwise it is null. This pairs naturally with the CSSPseudoElement interface that also shipped in Chrome 147, making pseudo-elements full participants in event-driven JavaScript without any heuristics.

references

implementation reference

Need the exact API surface, compatibility boundaries, errors, lifecycle, and source links? Read the matching gendn reference ↗