v150 · covered on mdn

Media element pseudo-classes

CSS pseudo-classes that match <audio> and <video> elements based on playback state — :playing, :paused, :buffering, :stalled, :seeking, :muted, and :volume-locked — enabling declarative styling of media controls without JavaScript. The v152 reference covers this same seven-class feature under a later milestone listing.

The archived milestone-150 listing captured 2026-05-30 placed this feature under “Enabled by default” (source data accurate as of 2026-05-11). The live feature record checked 2026-10-07 instead says “Proposed” and lists desktop, Android, and WebView milestone 158; the current milestone-150 listing omits it. The archived listing is provenance, not proof of present shipping in Chrome 150.

this API is documented on MDN

:playing — CSS — MDN Web Docs

gendn doesn't duplicate APIs that MDN already covers. Each pseudo-class has its own MDN page: :paused, :buffering, :stalled, :muted. MDN documents the selectors; the dated ChromeStatus records above describe their changing rollout status.

quick example

/* Show a pause icon overlay while playing */
video:playing::after {
  content: "⏸";
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: 3rem;
  opacity: 0;
  transition: opacity 0.2s;
}
video:playing:hover::after { opacity: 1; }

/* Dim the video when buffering */
video:buffering {
  filter: brightness(0.6);
}

/* Style muted controls differently */
.volume-btn:has(+ video:muted) {
  color: var(--text-muted);
}

The pseudo-classes reflect live playback state — no addEventListener required. They compose naturally with other selectors, :has(), and CSS transitions.

pseudo-classes at a glance

:playing — element is actively playing (including when temporarily stalled)
:paused — element is paused or not yet started
:buffering — playback has stalled temporarily waiting for data, but the element intends to play
:stalled — playback has stopped because data has not arrived for a significant time
:seeking — the media is seeking to a new position
:muted — audio output is muted
:volume-locked — the volume is locked by the user agent and cannot be changed by script

this API is documented on MDN

quick example

pseudo-classes at a glance

references