Теория
Теория

Псевдоклассы :link, :visited и :active

Отвлечёмся от биатлона и познакомимся с псевдоклассами для ссылок.

:link выбирает ещё не посещённые ссылки.
:visited выбирает посещённые ссылки.
:active выбирает активные ссылки (кнопка мыши зажата на ссылке).

Пример задания CSS-правил для ссылок:

a:link { ... }
a:visited { ... }
a:hover { ... }
a:active { ... }

Обратите внимание на порядок правил. Если их расположить по-другому, то некоторые могут не сработать.

index.html
style.css

HTML

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Псевдоклассы :link, :visited и :active</title> <link rel="stylesheet" href="style.css"> </head> <body> <h1>Псевдоклассы для ссылок</h1> <p> <a href="/courses/42/run/14">Эта ссылка посещена</a>, так как ведёт на страницу с этим заданием.</p> <p> <a href="/never-visited">Эта ссылка ещё не посещена</a>, так как ведёт на несуществующую страницу.</p> <p>Кстати, для ссылок очень часто задают стили при наведении с помощью :hover.</p> </body> </html>

CSS

ЗадачиВыполнено

Задайте ещё не посещённым ссылкам цвет color: black;.
Посещённым ссылкам цвет color: #cccccc;.
Активным ссылкам цвет color: green;.

Нажмите на любую ссылку для проверки работы селекторов.

Псевдоклассы :link, :visited и :active

Вход

Регистрация

Восстановление доступа