:current CSS Pseudo Class

Description

The CSS :current pseudo-class selector is a time-dimensional pseudo-class that represents an element or the ancestor of an element that is currently being displayed. It can be used to style elements based on their current state, such as their position in a timeline or their relationship to other elements that are being displayed.

One example of how the :current pseudo-class can be used is to style the subtitles of a video. The following CSS would style the subtitles of the video with the ID video to be white and bold:

#video :current(vttcues) {
color: white;
font-weight: bold;
}

The :current pseudo-class can also be used to style elements based on their relationship to other elements that are being displayed. For example, the following CSS would style the current slide in a carousel to have a red border:
.carousel :current(.slide) {
border: 1px solid red;
}

The :current pseudo-class is a powerful tool for styling elements based on their current state and relationship to other elements. It is especially useful for styling dynamic and interactive content.

The :current pseudo-class is still under development, but it is supported by all major browsers.

Syntax

:current {
  /* ... */
}

:current() {
  /* ... */
}

Example

No example, see CSS tab for example code.
.video-subtitles {
color: white;
opacity: 0.5;
}

.video-subtitles:current {
opacity: 1;
}

Browser Support

The following table will show you the current browser support for the CSS :current pseudo class.

Desktop
Edge Chrome Firefox Opera Safari
?????
Tablets / Mobile
Chrome Firefox Opera Safari Samsung Webview
??????

Last updated by CSSPortal on: 1st October 2023