W3docs
ru
Войти

Псевдокласс CSS :visited

Псевдокласс :visited выбирает и стилизует уже посещённые ссылки. Узнайте о псевдоклассе и попрактикуйтесь на примерах.

Псевдокласс :visited нацеливается на ссылки (элементы <a> с атрибутом href), которые пользователь уже посещал. Он позволяет придать посещённым ссылкам внешний вид, отличный от непосещённых, — классический UX-сигнал, указывающий читателям, какие страницы они уже открывали.

На этой странице рассматривается, что именно соответствует :visited, строгие (и необычные) ограничения, которые браузеры накладывают на стилизацию с его помощью, причины этих ограничений, а также правильный порядок комбинирования псевдокласса с другими состояниями ссылок.

a:visited {
  color: #8ebf42;
}

Как это работает

Ссылка считается «посещённой», если её URL есть в истории браузера. Браузер применяет стили :visited автоматически — никакого JavaScript или специальной разметки не требуется. Как только пользователь перейдёт по ссылке (или уже посещал этот URL ранее), соответствующая ссылка переключится на стиль посещённой.

Псевдоклассу :visited могут соответствовать только элементы <a> с атрибутом href. Якорь без href (например, <a>text</a>) считается заполнителем и никогда не соответствует ни :link, ни :visited.

Почему можно стилизовать лишь несколько свойств

Исторически :visited мог изменять почти любое свойство. Это оказалось серьёзной уязвимостью конфиденциальности: страница могла разместить тысячи скрытых ссылок и использовать getComputedStyle (или побочные эффекты компоновки), чтобы определить, какие из них отображались как «посещённые», — фактически читая историю браузера пользователя без его разрешения.

Чтобы закрыть эту брешь, современные браузеры ограничивают :visited свойствами, изменяющими только цвет, и намеренно искажают вычисленный стиль, чтобы скрипты не могли обнаружить разницу. Именно поэтому попытка задать, например, background-image или изменить размер блока через :visited молча не даёт никакого результата.

Свойства, которые браузеры по-прежнему разрешают для :visited:

Два дополнительных правила делают их безопасными:

  • Изменение должно исходить непосредственно от :visited; нельзя, например, сделать ссылку прозрачной через :link и показывать фон только через :visited.
  • Нельзя использовать rgba()/hsla() с частичной прозрачностью для раскрытия состояния ссылки; альфа-канал фактически игнорируется.

Если вам нужна более богатая стилизация в зависимости от состояния ссылки, применяйте её к состоянию, которое не является :visited, — например, :link, :hover или :focus.

Порядок LVHA

Когда вы стилизуете все четыре состояния ссылки, порядок правил важен из-за совпадения специфичности. Принятое соглашение — Link, Visited, Hover, Active (запоминается как "LoVe HAte"):

a:link    { color: #1c87c9; }  /* unvisited */
a:visited { color: #8ebf42; }  /* visited   */
a:hover   { color: #666666; }  /* mouse over */
a:active  { color: #cc0000; }  /* being clicked */

Если поставить :hover перед :visited, посещённая ссылка никогда не покажет свой цвет при наведении, потому что последующее правило :visited с той же специфичностью будет иметь приоритет.

Версия

Selectors Level 4

Selectors Level 3

Синтаксис

Синтаксис CSS :visited

:visited {
  css declarations;
}

Пример использования селектора :visited:

Пример кода CSS :visited

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      a {
        display: block;
        padding: 5px;
      }
      a:visited {
        color: #8ebf42;
      }
    </style>
  </head>
  <body>
    <h2>:visited selector example</h2>
    <a href="https://www.w3docs.com">W3docs</a>
    <a href="https://stackdev.io/">Stackdev</a>
  </body>
</html>
Попробуйте сами »

Пример использования селектора :visited с непосещёнными, посещёнными, наведёнными и активными ссылками:

Пример кода :visited

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      p {
        font-size: 20px;
      }
      /* unvisited link */
      a:link {
        color: #cccccc;
      }
      /* visited link */
      a:visited {
        color: #1c87c9;
      }
      /* mouse over link */
      a:hover {
        color: #8ebf42;
      }
      /* selected link */
      a:active {
        color: #666666;
      }
    </style>
  </head>
  <body>
    <h2>:visited selector example</h2>
    <p>Visit our
      <a href="https://www.w3docs.com/">website</a>.
    </p>
  </body>
</html>
Попробуйте сами »

Связанные селекторы

  • :link — стилизует ссылки, которые ещё не были посещены.
  • text-decoration — часто используется вместе с состояниями ссылок для добавления или удаления подчёркивания.

Практика

Практика
Что делает селектор :visited в CSS?
Что делает селектор :visited в CSS?
Was this page helpful?