CSS-псевдокласс :visited
Селектор :visited выбирает и стилизует посещённые ссылки на странице.
Псевдокласс :visited применяется, когда пользователь уже переходил по ссылке.
Если попытаться добавить стиль к посещённым ссылкам с помощью свойства (например, background-image), это не сработает в современных браузерах. Однако свойства стилей будут работать корректно, если использовать любой другой псевдокласс.
Стили, которые можно изменить с помощью этого селектора, очень ограничены. Браузеры разрешают использовать следующие свойства:
- color
- background-color
- border-color
- outline color
- column-rule-color
- цветовые части свойств fill и stroke
В браузерах предусмотрена возможность игнорировать стили для псевдоклассов :link и :visited, поскольку :visited может быть использован во вред: злоумышленник сможет получить информацию из истории браузера посетителя.
Версия
Синтаксис
Синтаксис 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>Практика
Что делает селектор :visited в CSS?