`:current` CSS псевдокласс

Селектор псевдокласса CSS :current обозначает элемент или его предка, который в данный момент отображается или выделен.

Синтаксис

:current {
  /* ... */
}

:current(<compound-selector-list>) {
  /* ... */
}

Описание

Псевдокласс :current используется для обозначения «текущего» элемента из последовательности элементов.

Это может означать «текущий» в смысле времени: :current можно использовать для выбора отображаемых в данный момент подписей или субтитров (представленных с помощью WebVTT), связанных с воспроизводимым видео.

Также он может обозначать элемент, выделенный в данный момент в последовательности. Например, :current можно сочетать с ::search-text псевдоэлементом, чтобы задать особые стили для текущего результата поиска, выделенного функцией поиска текста «Найти на странице» в браузере.

Например:

p::search-text {
  color: white;
  background-color: purple;
}

p::search-text:current {
  background-color: crimson;
}

Примеры

Пользовательские стили для результатов поиска текста

В этом примере показано, как использовать ::search-text и :current для создания пользовательских стилей результатов поиска в браузере с помощью функции «Найти на странице».

HTML

HTML состоит из обычного абзаца текста. Мы не приводим исходный код HTML — как для краткости, так и для удобства навигации по результатам поиска в отображаемом примере.

<p>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec finibus est
  eget eros congue pellentesque. Etiam a augue accumsan, scelerisque nisl sit
  amet, lobortis nulla. Aliquam condimentum eu orci eu elementum. Donec
  porttitor quam et posuere commodo. Mauris rhoncus diam a scelerisque molestie.
  Integer sollicitudin risus dui, ut sagittis lorem laoreet eget. Duis eget
  pretium enim. Morbi tristique, diam sit amet gravida finibus, metus ex
  tincidunt nibh, ac volutpat urna purus et arcu. Donec risus risus, semper vel
  purus sit amet, gravida vestibulum est. Sed et tristique urna. Nam vel mi eget
  nisi consectetur elementum. Aenean faucibus aliquam cursus. Morbi posuere
  tincidunt velit, et sagittis quam sagittis in. Nam eget ante ultrices, auctor
  dui vel, euismod lacus. Vivamus tincidunt, sem ac sodales aliquet, tortor
  tortor consequat diam, nec tempor mi dui vel eros. Aliquam ac erat et metus
  egestas scelerisque.
</p>

CSS

В CSS сначала зададим стили псевдоэлемента ::search-text. Для него мы укажем пользовательские стили background-color, color и text-shadow.

html {
  font-family: "Helvetica", "Arial";
}

p {
  font-size: 1.5rem;
  line-height: 1.5;
  width: 90%;
  margin: 0 auto;
}

@layer no-support {
  body::before {
    background-color: wheat;
    display: block;
    text-align: center;
    padding: 1em 0;
  }
  @supports not selector(::search-text) {
    body::before {
      content: "Your browser doesn't support the ::search-text pseudo-element.";
    }
  }
  @supports not selector(:current) {
    body::before {
      content: "Your browser doesn't support the :current pseudo-class.";
    }
  }
}

::search-text {
  background-color: purple;
  color: white;
  text-shadow: 1px 1px 1px black;
}

Наконец, зададим стиль для текущего результата поиска с помощью ::search-text:current, назначив ему другое значение background-color и добавив стили text-decoration, чтобы отличить его от остальных результатов.

::search-text:current {
  background-color: crimson;
  text-decoration-line: underline;
  text-decoration-color: yellow;
  text-decoration-thickness: 3px;
}

Результат

Пример отображается следующим образом:

Попробуйте воспользоваться функцией поиска на странице в браузере, чтобы найти слово, которое встречается в тексте примера несколько раз, например «aliquam», «amet» или «tortor». Переключайтесь между предыдущим и следующим результатами, чтобы посмотреть, как оформлен элемент с помощью :current.

Стилизация отображаемых в данный момент субтитров WebVTT

CSS

:current(p, span) {
  background-color: yellow;
}

HTML

<video controls preload="metadata">
  <source src="video.mp4" type="video/mp4" />
  <source src="video.webm" type="video/webm" />
  <track
    label="English"
    kind="subtitles"
    srclang="en"
    src="subtitles.vtt"
    default />
</video>

WebVTT

WEBVTT FILE

1
00:00:03.500 --> 00:00:05.000
This is the first caption

2
00:00:06.000 --> 00:00:09.000
This is the second caption

3
00:00:11.000 --> 00:00:19.000
This is the third caption

Спецификации

Совместимость с браузерами

См. также

• Формат текстовых дорожек веб-видео (WebVTT)
• :past
• :future
• Модуль CSS-селекторов