`:playing` CSS pseudo-class
Baseline Newly available
This feature works across the latest devices and browser versions. This feature might not work in older devices or browser versions. It's been available across browsers since August 2026.
The :playing CSS pseudo-class selector represents the playback state of an element that is playable, such as <audio> or <video>, when that element is "playing". An element is considered to be playing if it is currently playing the media resource, or if it has temporarily stopped for reasons other than user intent (such as :buffering or :stalled).
Syntax
:playing {
/* ... */
}
Examples
CSS
:playing {
border: 5px solid green;
}
Specifications
| Specification |
|---|
| Selectors Level 4 # selectordef-playing |
| HTML # selector-playing |
Browser compatibility
| Desktop | Mobile | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Opera | Safari | Chrome Android | Firefox for Android | Opera Android | Safari on iOS | Samsung Internet | WebView Android | WebView on iOS | |
playing |
152 |
152 |
150 |
136 |
15.4 |
152 |
150 |
No |
15.4 |
No |
152 |
15.4 |
See also
© 2005–2025 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Selectors/:playing
