Skip to content

Files

Latest commit

 

History

History
29 lines (24 loc) · 1.5 KB

5ea6f92ad3873ee397985e54.md

File metadata and controls

29 lines (24 loc) · 1.5 KB
title date submitter number tags discussion status related
I want state-based pseudo-classes for media elements
2020-04-27 15:24:26 UTC
Kilian Valkhof
5ea6f92ad3873ee397985e54
css
in-progress
title url type
Resource Pseudo-classes in CSS Selector 4
draft
title url type
CSS Content State Selectors Module Level 1
proposal

Sometimes you want to style video elements differently depending on if they're playing or not. For example, in the paused state we want to show a play button on top of the video element, and hide that when the video starts playing. For that, it would be great if you could use CSS pseudo-classes to target the video state:

video:playing { ... }
video:paused { ... }

That would make styling more straightforward. Currently, we have to listen to JavaScript events and conditionally set classes on the element that we can only then target with CSS.

This could further be expended with :loading, :stopped and :error pseudo-classes. The :error class could also apply to img and picture elements if the source returns an error code or can't be found.

Mozilla Firefox has some precedent here, with the :moz-broken and :moz-loading pseudo-classes.