CSS :seeking Pseudo-Class

The CSS :seeking pseudo-class matches a media element while it is seeking to a different playback position. It is designed for HTML audio and video elements and allows styles to respond automatically when the browser is locating a requested position in the media timeline.

:seeking Syntax

:seeking {
  property: value;
}

The :seeking pseudo-class matches media elements that are currently seeking to a new playback position. It does not accept arguments or require parentheses.

Video Example

video:seeking {
  outline: 3px solid #006699;
}

Applies an outline to a video element while seeking is in progress, in browsers that support the pseudo-class.

Audio Example

audio:seeking {
  opacity: 0.6;
}

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

Combined Selector

video:seeking,
audio:seeking {
  outline: 3px solid #006699;
}

Applies the same styling to audio and video elements during seeking.

No Parentheses

The correct syntax is :seeking, not :seeking().

How :seeking Works

Seeking occurs when a media element attempts to move its current playback position to another point in the media timeline.

Normal Playback

While audio or video plays normally, the media element is not necessarily seeking. The browser advances through the timeline as playback continues.

Seeking Begins

When the playback position changes, the browser may need to locate and decode media data at the requested time. During that operation, the element can match :seeking.

Seeking Ends

Once the seeking operation completes, the element stops matching :seeking.

Automatic State Matching

In supporting browsers, CSS updates automatically as the media element enters and leaves the seeking state.

Short Duration

Seeking can complete very quickly, especially when media data is already available. A visual change may be difficult to notice.

Not a Permanent Style

The pseudo-class represents a temporary media state. It is not intended to identify an audio or video element permanently.

Supported Media Elements

The :seeking pseudo-class is intended for media elements with a playback timeline.

Video Elements

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

A video element can enter the seeking state when its playback position changes.

Audio Elements

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

An audio element can enter the seeking state when the user or a script changes its playback position.

Media Timeline

Seeking requires a meaningful playback position. Live media streams may have limited or different seeking capabilities.

Other HTML Elements

Ordinary elements such as <div>, <p>, and <button> do not become seeking media elements merely because they have a similar class or attribute.

Media Controls

The browser's built-in media controls can allow users to seek through the timeline. Their appearance and capabilities vary by browser.

The Seeking Process

The seeking process begins when a media element is instructed to move to a different playback position.

User-Initiated Seeking

Users can seek by dragging a media progress control or selecting another point in the timeline, when the media player supports it.

Script-Initiated Seeking

const video = document.querySelector("video");
video.currentTime = 15;

Requests playback at 15 seconds. The requested position must be valid for the media resource.

Seeking State

console.log(video.seeking);

The seeking property reports whether a seek operation is currently in progress.

CSS State

video:seeking {
  outline: 3px solid #006699;
}

The pseudo-class represents the same general seeking condition through CSS, where implemented.

Seeking Completion

When the browser finishes locating the requested position, the seeking state ends. Playback may resume, remain paused, or wait for additional media data.

:seeking vs. :buffering

Seeking and buffering describe different media conditions, although they can occur during the same playback operation.

Comparison

Pseudo-Class	Matching Behavior
`:seeking`	Matches while a media element is seeking to a playback position.
`:buffering`	Matches when a media element is buffering and cannot continue playback normally.

Seeking Example

video:seeking {
  outline: 3px solid #006699;
}

Buffering Example

video:buffering {
  outline: 3px solid #cc6600;
}

Possible Overlap

A browser may need additional media data after seeking to a new position. Seeking and buffering can be related, but they are not interchangeable states.

Choosing the Right Selector

Use :seeking for playback-position changes and :buffering for buffering-related feedback, where the selectors are supported.

:seeking vs. :stalled

The :stalled pseudo-class represents a media element whose playback has stalled because media data is unavailable or cannot be obtained as needed.

Comparison

Pseudo-Class	Purpose
`:seeking`	Indicates an active seek operation.
`:stalled`	Indicates stalled media playback or data retrieval.

CSS Example

video:seeking {
  outline: 3px solid #006699;
}
video:stalled {
  outline: 3px solid #b3261e;
}

Uses different outline colors for seeking and stalled conditions in supporting browsers.

Seeking Does Not Mean Failure

Seeking is a normal operation. It does not necessarily indicate a network problem or playback error.

Stalled Does Not Mean Seeking

Media playback can stall without a request to change playback position.

Playing and Paused States

The :playing and :paused pseudo-classes describe playback-related states, while :seeking describes movement to a different position in the timeline.

Playing State

video:playing {
  border-color: #228b22;
}

Applies styling while the video matches the playing state.

Paused State

video:paused {
  border-color: #999;
}

Applies styling while the video matches the paused state.

Seeking State

video:seeking {
  border-color: #006699;
}

Applies styling during seeking.

State Combinations

A user can seek while media is paused or while playback is active. These conditions should not be treated as mutually exclusive.

CSS Cascade

If multiple state selectors match and set the same property, normal cascade rules determine which declaration is applied.

JavaScript and Seeking

JavaScript can request seeking, inspect the current seeking state, and respond to changes in the media timeline.

Set the Playback Position

const video = document.getElementById("demo-video");
video.currentTime = 10;

Requests a playback position of 10 seconds.

Check the Seeking Property

console.log(video.seeking);

Returns true while seeking is in progress and false otherwise.

Listen for Seeking

video.addEventListener("seeking", () => {
  console.log("Seeking started");
});

Runs when the media element enters the seeking state.

Listen for Seeked

video.addEventListener("seeked", () => {
  console.log("Seeking completed");
});

Runs when the seek operation completes.

Check CSS Matching

console.log(video.matches(":seeking"));

Checks whether the video currently matches the CSS pseudo-class in browsers that implement it.

Compatibility Fallback

For applications requiring reliable seeking indicators across browsers, use the media events and seeking property rather than relying exclusively on CSS :seeking.

Media Events

HTML media elements provide events that allow scripts to respond to seeking and playback changes.

Related Events

Event	Description
`seeking`	Fires when a seek operation begins.
`seeked`	Fires when a seek operation completes.
`timeupdate`	Fires when the current playback position updates.
`waiting`	Fires when playback stops temporarily while waiting for more data or another condition.
`stalled`	Fires when the browser is attempting to obtain media data but data is unexpectedly unavailable.

Event Example

const video = document.querySelector("video");
video.addEventListener("seeking", () => {
  video.classList.add("is-seeking");
});
video.addEventListener("seeked", () => {
  video.classList.remove("is-seeking");
});

CSS Fallback

video.is-seeking {
  outline: 3px solid #006699;
}

This approach provides a JavaScript-controlled style without requiring support for the :seeking pseudo-class.

Event vs. Pseudo-Class

Media events allow scripts to perform actions. The pseudo-class provides a declarative CSS selector for the seeking state.

Visual Feedback

Visual feedback can help users understand when a media player is moving to a requested playback position.

Outline

video:seeking {
  outline: 3px solid #006699;
}

Highlights the media element while seeking.

Opacity

video:seeking {
  opacity: 0.7;
}

Temporarily changes the appearance of the video element.

Status Indicator

.media-wrapper .seeking-message {
  display: none;
}
.media-wrapper:has(video:seeking) .seeking-message {
  display: block;
}

Displays a status message when the wrapper contains a seeking video, provided the browser supports both :has() and :seeking.

Accessible Status

For important status messages, use JavaScript media events to update visible text and an appropriate live region. CSS-generated visual feedback alone may not communicate the state to assistive technology.

Avoid Excessive Effects

Use simple changes such as outlines or status text rather than distracting animations.

:seeking Specificity

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

Specificity Examples

Selector	Specificity
`:seeking`	`0-1-0`
`video:seeking`	`0-1-1`
`audio:seeking`	`0-1-1`
`.media-player:seeking`	`0-2-0`
`#demo-video:seeking`	`1-1-0`
`:where(video:seeking)`	`0-0-0`

Specificity Example

video {
  outline: 2px solid #ccc;
}
video:seeking {
  outline: 3px solid #006699;
}

When the video matches :seeking, the more specific rule applies, assuming no higher-priority declaration overrides it.

Multiple Media States

Selectors such as video:playing and video:seeking have equal specificity. If both match and declare the same property, source order can determine the result when other cascade factors are equal.

Practical Uses

The :seeking pseudo-class can be used to provide visual feedback in media players that support the selector.

Video Player Outline

video:seeking {
  outline: 3px solid #006699;
}

Highlights a video while the playback position is changing.

Audio Player Feedback

audio:seeking {
  opacity: 0.6;
}

Changes the appearance of an audio player during seeking.

Custom Media Player

.media-player:has(video:seeking) {
  border-color: #006699;
}

Highlights a media-player container while its video is seeking, in browsers that support the selectors.

Status Text

.media-player:has(video:seeking) .status {
  color: #006699;
}

Changes the appearance of a status element during seeking.

Fallback Class

.media-player.is-seeking {
  border-color: #006699;
}

Allows JavaScript media events to control the same type of feedback when the pseudo-class is unavailable.

Limitations

The :seeking pseudo-class has important compatibility and timing considerations.

Limited Browser Availability

The selector is not consistently implemented across major browsers. Do not rely on it as the only mechanism for important media feedback.

Temporary State

Seeking may complete too quickly for users to notice a visual change.

Media-Specific

The selector is intended for media elements, not ordinary document elements.

Not a Loading Indicator

Seeking and buffering are different states. Use the appropriate mechanism for the condition being communicated.

Not an Error State

Seeking does not mean the media failed to load or play.

No Automatic Status Text

The pseudo-class does not create an accessible status announcement by itself.

Media Availability

Seeking depends on the media resource, its available timeline, and the browser's media capabilities.

Browser Controls

Built-in media controls are rendered differently across browsers. Styling the media element does not guarantee changes to the internal controls.

Fallback Required

Use the HTML media API and events such as seeking and seeked when consistent cross-browser behavior is required.

Best Practices

Use :seeking only for media elements that support seeking.
Check browser compatibility before relying on the pseudo-class in production.
Use the seeking and seeked events as a fallback for important functionality.
Keep visual feedback simple and easy to understand.
Do not treat seeking as an error or network failure.
Remember that seeking can happen while media is paused or playing.
Use :buffering or :stalled only when those specific media conditions apply.
Provide visible status text when users need to understand what the player is doing.
Use an accessible live region for important status changes when appropriate.
Test the media player with actual seekable audio or video content.

:seeking Example

This example uses an HTML video element and JavaScript media events to demonstrate seeking. The CSS includes the :seeking pseudo-class and a JavaScript-controlled fallback class. Use the video controls or the Skip Forward button to change the playback position.

HTML

<div class="seeking-demo">
  <video id="demo-video" controls preload="metadata" width="280">
    <source src="movie-01.mp4" type="video/mp4">
    Your browser does not support the video element.
  </video>
  <p id="media-status" role="status" aria-live="polite">Ready</p>
  <button type="button" id="skip-forward">Skip Forward 5 Seconds</button>
</div>

CSS

.seeking-demo video {
  display: block;
  max-width: 100%;
  outline: 3px solid transparent;
}
.seeking-demo video:seeking,
.seeking-demo video.is-seeking {
  outline-color: #006699;
}
.seeking-demo #media-status {
  margin: 10px 0;
  font-weight: bold;
}
.seeking-demo button {
  padding: 8px 12px;
  cursor: pointer;
}

JavaScript

const video = document.getElementById("demo-video");
const status = document.getElementById("media-status");
video.addEventListener("seeking", () => {
  video.classList.add("is-seeking");
  status.textContent = "Seeking...";
});
video.addEventListener("seeked", () => {
  video.classList.remove("is-seeking");
  status.textContent = "Seeking complete";
});
document.getElementById("skip-forward").addEventListener("click", () => {
  if (Number.isFinite(video.duration)) {
    video.currentTime = Math.min(video.currentTime + 5, video.duration);
  }
});

Browser Result

Play in Editor

Note: The outline changes during seeking when the browser supports the pseudo-class or when JavaScript applies the fallback class. Seeking may complete almost immediately. The status message provides additional feedback.

Browser Support

Baseline: Limited availability. The :seeking pseudo-class is not consistently supported across major browsers. The HTML media element's seeking property and related events are more widely supported.

For current compatibility information, visit Can I Use? and search for :seeking or media playback state pseudo-classes.

Specifications

The :seeking pseudo-class is defined in CSS Selectors Level 4 as a media resource state pseudo-class.

Selectors Level 4 - Media Resource State Pseudo-Classes