Селекторы, часть 1 / Псевдоклассы :link, :visited и :active [14/18]
×

Псевдоклассы :link, :visited и :active [14/18]

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

  • :link выбирает ещё не посещённые ссылки.

  • :visited выбирает посещённые ссылки.

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

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

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

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


Выполнить задание
HTML
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Псевдоклассы :link, :visited и :active</title> </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
HTML Academy
  1. Задайте ещё не посещённым ссылкам цвет color: black;.
  2. Посещённым ссылкам цвет color: #cccccc;.
  3. Активным ссылкам цвет color: green;.

Щёлкните по любой ссылке для проверки работы селекторов.

Теория Проверить Следующее задание
Идёт запись на курс Продвинутый HTML и CSS #10, который стартует 27 февраля.

Обсуждение и комментарии

Если у вас возникли сложности при прохождении задания, то вы можете обратиться за помощью на наш форум. Мы отслеживаем сообщения и постараемся ответить максимально быстро.

Пожалуйста, не пишите решение задач. Такие сообщения будут удаляться.

Перейти на форум или открыть комментарии.