Media element pseudo-classes

[lukewarlow]

Description

Developers would like to control more of the audio/video user experience. The :playing, :paused, :seeking, :buffering, :stalled, :muted, and :volume-locked CSS pseudo-classes match <audio> and <video> elements based on their state.

Specification

https://drafts.csswg.org/selectors/#resource-pseudos

web-feature

https://web-platform-dx.github.io/web-features-explorer/features/media-pseudos/

Test Links

css/selectors/media/media-loading-state.html
css/selectors/media/media-playback-state.html
css/selectors/media/sound-state.html

Additional Signals

Same as #878 from last year.

[github-actions]

This comment was automatically generated based on the information you provided. Please don't edit it.

Below is additional information about the web feature (from the web-features project) which is referenced in your proposal.
If this doesn't accurately correspond to your proposal, please update your initial comment to include web-features: <feature-id>.
To find feature IDs, use the web-features explorer.

Feature Media element pseudo-classes

• ID: media-pseudos
• Name: Media element pseudo-classes
• Description: The :playing, :paused, :seeking, :buffering, :stalled, :muted, and :volume-locked CSS pseudo-classes match <audio> and <video> elements based on their state.
• Baseline status: Limited Availability
• Docs: :paused, :playing
• WPT tests: wpt.fyi/results/?q=feature:media-pseudos
• More information: See the web-features explorer

[foolip]

@lukewarlow I took the liberty of linking https://web-platform-dx.github.io/web-features-explorer/features/media-pseudos/ by editing your description, to help generate the bot comment (above).

[foolip]

I've started working on this in Chromium and made some changes to make the tests fail fast in web-platform-tests/wpt#56135, but accidentally also made the tests for :buffering and :stalled fail in Safari.

The proximate cause is that I'm using getVideoURI() and I didn't realize that would make Safari also use the WebM file instead of MP4. The trickle(100:d1:r2) pipe sends 100 bytes at a time with 2-second pauses in between, but it doesn't have the same effect with the WebM file, and the test times out.

Looking closer, I don't think trickle(100:d1:r2) is a robust way to trigger the stalled event event, as there's some amount of progress every 2 seconds, and the stalled timeout could be longer. I think tests need to send a part of the resource and then pause indefinitely. But with counting.* I've not been able to find a number of bytes that reliably starts playback and then pauses for buffering in all browsers.

This is all to say that there are some things to figure out here, and I'm going to unbreak the tests one way or another.

cc @nt1m

[alastor0325]

FYI, Firefox also has an implementation of media pseudo-classes available in Nightly, which is currently disabled by default. I've filed a issue whatwg/html#12145 to discuss the definition of :stalled.

In addition, some WPTs related to this feature that rely on firing the stalled event do not work correctly in Firefox. We have a tracking bug for this issue and aim to make those tests successfully fire the stalled event across all browsers.

[wpt-interop]

Thank you for proposing Media element pseudo-classes for Interop 2026.

We are pleased to let you know that it has been accepted as part of the Media pseudo-classes focus area.

You’ll be able to track progress on this topic throughout the year via the Interop 2026 dashboard.

Posted on behalf of the Interop team.