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

:visited — это CSS псевдокласс, который применяется, когда пользователь посещает ссылку. По соображениям конфиденциальности стили, которые можно изменить с помощью этого селектора, сильно ограничены. Псевдокласс :visited применяется только к элементам <a> и <area>, у которых есть атрибут href.

Стили, заданные для псевдокласса :visited и непосещённых ссылок :link, могут быть переопределены любыми последующими псевдоклассами действий пользователя (:hover или :active) с равной или большей специфичностью. Чтобы правильно стилизовать ссылки, разместите правило :visited после правила :link, но перед правилами :hover и :active, согласно порядку LVHA: :link — :visited — :hover — :active. Псевдоклассы :visited и :link взаимоисключающие.

Попробуйте

p {
  font-weight: bold;
}

a:visited {
  color: forestgreen;
  text-decoration-color: hotpink;
}

<p>Pages that you might have visited:</p>
<ul>
  <li>
    <a href="https://developer.mozilla.org">MDN Web Docs</a>
  </li>
  <li>
    <a href="https://www.youtube.com/">YouTube</a>
  </li>
</ul>
<p>Pages unlikely to be in your history:</p>
<ul>
  <li>
    <a href="https://developer.mozilla.org/missing-1">Random MDN page</a>
  </li>
  <li>
    <a href="https://example.com/missing-1">Random Example page</a>
  </li>
</ul>

Ограничения конфиденциальности

По соображениям конфиденциальности браузеры строго ограничивают стили, которые можно применить с помощью этого псевдокласса, а также способы их использования:

• Допустимые свойства CSS: color, background-color, border-color, border-bottom-color, border-left-color, border-right-color, border-top-color, column-rule-color, outline-color, text-decoration-color и text-emphasis-color.
• Допустимые атрибуты SVG: fill и stroke.
• Альфа-компонент допустимых стилей игнорируется. Вместо него используется альфа-компонент состояния элемента без :visited. В Firefox, если альфа-компонент равен 0, стиль, заданный в :visited, полностью игнорируется.
• Хотя эти стили могут изменить вид цветов для пользователя, метод window.getComputedStyle будет возвращать неверное значение — всегда значение цвета для состояния без :visited.
• Элемент <link> никогда не соответствует селектору :visited.
• Методы DOM, которые выбирают элементы с помощью CSS-селекторов, например querySelector() и querySelectorAll(), всегда возвращают «пустой» результат, даже если в документе есть посещённые ссылки. Для упомянутых методов это будет null или пустой NodeList соответственно.

Синтаксис

:visited {
  /* ... */
}

Примеры

Свойства, у которых в противном случае не было бы цвета или которые были бы прозрачными, нельзя изменить с помощью :visited. Среди свойств, которым можно задать значение с помощью этого псевдокласса, в вашем браузере, вероятно, есть значения по умолчанию только для color и column-rule-color. Поэтому, если вы хотите изменить другие свойства, задайте им базовые значения вне селектора :visited.

HTML

<a href="#test-visited-link">Have you visited this link yet?</a><br />
<a href="">You've already visited this link.</a>

CSS

a {
  /* Specify non-transparent defaults to certain properties,
     allowing them to be styled with the :visited state */
  background-color: white;
  border: 1px solid white;
}

a:visited {
  background-color: yellow;
  border-color: hotpink;
  color: hotpink;
}

Результат

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

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

См. также

• Конфиденциальность и селектор :visited
• Псевдоклассы, связанные со ссылками: :link, :active, :hover