CSS :paused Pseudo-Class

CSS :paused Pseudo-Class

The CSS :paused pseudo-class selects media elements, such as <video> and <audio>, when they are in a paused state. It allows developers to change the appearance of media players based on playback status without manually adding CSS classes.

:paused Syntax

selector:paused {
  property: value;
}

The :paused pseudo-class matches supported media elements while their playback is paused.

Basic Example

video:paused {
  border: 3px solid #006699;
}

Adds a blue border around a video while it is paused.

Audio Example

audio:paused {
  opacity: 0.7;
}

Reduces the opacity of an audio element while it is paused.

Class Selector

.media-player:paused {
  outline: 2px solid #006699;
}

Matches a paused media element with the media-player class. The class alone does not give an ordinary container a media playback state.

No Parentheses

The :paused pseudo-class does not accept arguments and is written without parentheses.

How :paused Works

The browser determines whether a media element is paused. The :paused pseudo-class matches while the media is not actively playing because playback has been paused or has not started.

HTML Example

<video controls width="300">
  <source src="video/sample.mp4" type="video/mp4">
  Your browser does not support the video element.
</video>

CSS Example

video {
  border: 3px solid #ccc;
}
video:paused {
  border-color: #006699;
}

The video receives the blue border while paused. When playback begins, it no longer matches :paused.

Automatic State Changes

The browser updates the selector when the media's playback state changes. JavaScript is not required merely to update the CSS styling.

Not a General Pause Selector

The pseudo-class does not match an ordinary button or div because it has a class named paused. It depends on a supported media playback state.

Media State vs. Visibility

Whether a media element is visible does not determine whether it matches :paused. A paused video can remain visible on the page.

Paused <video> Elements

The :paused pseudo-class can style video elements based on whether playback is paused.

HTML Example

<video class="tutorial-video" controls width="300" preload="metadata">
  <source src="video/sample.mp4" type="video/mp4">
  Your browser does not support the video element.
</video>

CSS Example

.tutorial-video {
  border: 3px solid #ccc;
}
.tutorial-video:paused {
  border-color: #006699;
  box-shadow: 0 0 8px rgb(0 102 153 / 20%);
}

The video receives a blue border and shadow while paused.

Playing State

.tutorial-video:playing {
  border-color: #2e7d32;
}

Changes the border to green when the video is playing.

Native Controls

The controls attribute displays the browser's built-in playback controls. Users can play or pause the video without custom JavaScript.

Poster Images

A video can display a poster image before playback begins. The poster does not prevent the video element from matching its paused state.

Paused <audio> Elements

Audio elements also have playback states and can be styled with :paused.

HTML Example

<audio class="tutorial-audio" controls>
  <source src="audio/sample.mp3" type="audio/mpeg">
  Your browser does not support the audio element.
</audio>

CSS Example

.tutorial-audio:paused {
  opacity: 0.7;
}
.tutorial-audio:playing {
  opacity: 1;
}

The audio player appears less prominent while paused and returns to full opacity during playback.

Audio Player Border

audio:paused {
  outline: 2px solid #006699;
}

Adds an outline around a paused audio element.

Native Audio Interface

Browsers may render audio controls differently. Styling the audio element itself is generally more predictable than attempting to style the internal native control buttons.

No Visible Video Frame

Unlike video elements, audio elements do not display video frames. State styling is applied to the audio element or its visible control area.

Playback States

Media playback involves several conditions, including playing, paused, seeking, and waiting for data. These states should not be confused with one another.

Playback State Comparison

CSS State Selectors

video:paused {
  border-color: #006699;
}
video:playing {
  border-color: #2e7d32;
}
video:seeking {
  outline: 2px dashed #cc8800;
}

These selectors provide different styles for supported playback states.

Pausing vs. Buffering

A media element waiting for data during playback is not necessarily paused. Buffering and paused states describe different playback conditions.

Seeking While Paused

A user can change the playback position while a video is paused. Depending on the current state, seeking and paused conditions can overlap.

Initial and Ended States

The paused state is not limited to a user clicking the Pause button.

Before Playback Begins

<video controls preload="metadata">
  <source src="video/sample.mp4" type="video/mp4">
</video>

A video that has not started playback is initially paused and can match :paused.

After Calling pause()

const video = document.querySelector("video");
video.pause();

Calling pause() places the media element in its paused state.

After Playback Ends

When playback reaches the end, the media element stops playing. Its exact state should be understood separately from whether the media has ended.

Looping Media

A media element with the loop attribute can restart automatically at the end instead of remaining at the end of the timeline.

Autoplay

Media configured with autoplay may begin playback automatically when permitted. Browser autoplay policies can prevent playback from starting, particularly for media with sound.

JavaScript and Media Playback

JavaScript can control playback using the HTML media element API. The browser updates :paused matching when the playback state changes.

HTML Example

<video id="demo-video" controls width="300">
  <source src="video/sample.mp4" type="video/mp4">
</video>
<button type="button" id="pause-video">Pause Video</button>

JavaScript Example

const video = document.getElementById("demo-video");
document.getElementById("pause-video").addEventListener("click", () => {
  video.pause();
});

When the button is activated, the video pauses and matches :paused.

Checking the Paused Property

console.log(video.paused);

The paused property reports whether the media element is paused.

Playback Events

video.addEventListener("pause", () => {
  console.log("Video paused");
});
video.addEventListener("play", () => {
  console.log("Video playback requested");
});

Media events are useful when JavaScript needs to perform additional actions. CSS does not require these event listeners merely to apply :paused styling.

Playing Media

video.play().catch((error) => {
  console.log("Playback could not start:", error);
});

The play() method returns a promise that can reject when playback is prevented, such as by an autoplay policy.

Related Pseudo-Classes

Several media-related pseudo-classes describe playback conditions and media activity.

Comparison

Paused vs. Playing

video:paused {
  border-color: #006699;
}
video:playing {
  border-color: #2e7d32;
}

The first rule styles paused video, while the second styles video in the playing state.

Paused vs. Muted

Muted media can continue playing without sound. The :muted pseudo-class describes audio output, while :paused describes playback state.

Paused vs. Seeking

Seeking changes the playback position. A video can be paused while the user seeks to a different position.

:paused Specificity

The :paused pseudo-class contributes a specificity of 0-1-0, like other standard pseudo-classes.

Specificity Examples

Specificity Example

video {
  border: 3px solid #ccc;
}
video:paused {
  border-color: #006699;
}

When both rules match and other cascade factors are equal, the :paused rule takes precedence because it has greater specificity.

Combined Pseudo-Classes

video:paused:muted {
  opacity: 0.7;
}

This selector matches a video that is both paused and muted.

Practical Uses

The :paused pseudo-class provides a way to display playback-state feedback using CSS.

Paused Video Border

video:paused {
  border: 3px solid #006699;
}

Highlights a video when playback is paused.

Paused Video Shadow

video:paused {
  box-shadow: 0 0 10px rgb(0 102 153 / 25%);
}

Adds a subtle shadow around a paused video.

Audio Player Appearance

audio:paused {
  opacity: 0.7;
}

Reduces the visual prominence of an audio player while paused.

Paused Video Overlay

.video-container:has(video:paused) .pause-indicator {
  display: block;
}
.video-container:has(video:playing) .pause-indicator {
  display: none;
}

Uses :has() to show a separate pause indicator based on the state of a video inside its container.

Multiple Media Players

.media-list video:paused {
  outline: 2px solid #006699;
}

Styles paused videos within a collection of media players without affecting videos that are playing.

Limitations

The :paused pseudo-class applies to supported media playback states and has several important limitations.

Media Elements Only

Ordinary HTML elements do not match :paused simply because an application considers them paused.

Not a CSS Animation Selector

Pausing a CSS animation with animation-play-state: paused does not cause the animated element to match :paused.

Not a Visibility Selector

A paused video can remain visible. Properties such as display and visibility do not determine its playback state.

Native Controls

The pseudo-class styles the media element, not necessarily the individual controls inside the browser's native player interface.

Playback State Differences

Buffering, seeking, and muted states are not equivalent to being paused.

Browser Support

Support for newer media-state pseudo-classes can vary across browser versions. Test playback-state styling in the browsers you support.

Not a Playback Control

The pseudo-class does not pause or resume media. It only matches the current playback state for styling.

Best Practices

• Use :paused to style supported media elements in their paused state.
• Combine it with video or audio to target the intended media type.
• Use :playing when different styling is needed during playback.
• Remember that media may begin in a paused state before the user presses Play.
• Do not confuse paused playback with buffering, seeking, or muted audio.
• Preserve accessible playback controls and keyboard interaction.
• Use visible indicators in addition to color when playback status needs to be clear.
• Use :has() when styling a container based on its media element's state.
• Test native media controls across supported browsers and devices.
• Use media events and JavaScript when application behavior must change in addition to CSS styling.

:paused Example

This example uses a video element with native playback controls. The video receives a blue border while paused and a green border while playing. The browser updates the styling automatically as the playback state changes.

HTML

<div class="paused-demo">
  <video controls width="280" preload="metadata">
    <source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
    Your browser does not support the video element.
  </video>
  <p>Use the video controls to play or pause.</p>
</div>

CSS

.paused-demo video {
  display: block;
  max-width: 100%;
  box-sizing: border-box;
  border: 3px solid #ccc;
}
.paused-demo video:paused {
  border-color: #006699;
  box-shadow: 0 0 8px rgb(0 102 153 / 20%);
}
.paused-demo video:playing {
  border-color: #2e7d32;
  box-shadow: 0 0 8px rgb(46 125 50 / 20%);
}
.paused-demo p {
  margin-top: 10px;
  font-size: 0.875rem;
}

Browser Result

Play in Editor

Note: The video initially matches :paused and displays a blue border. Press Play to see the border change to green. Pause the video to restore the blue styling. Video playback requires the external media file to be accessible.

Browser Support

Baseline: Newly available. The :paused pseudo-class is supported in recent versions of major browsers. Older browser versions may not recognize it, so compatibility should be checked before relying on it for essential interface feedback.

For current compatibility information, visit Can I Use? and search for :paused.

Compatibility Alternative

For older browsers, JavaScript can listen for media events and apply classes such as .is-paused and .is-playing to provide equivalent visual feedback.

Specifications

The :paused pseudo-class is defined in CSS Selectors Level 4 as a media-state pseudo-class. It represents media elements that are in a paused state.

Selectors Level 4 - Video-State Pseudo-Classes