skip to main content

:visited

css

Кратко 🔗

Псевдокласс :visited добавляется ссылкам, по которым уже переходил пользователь.

Внешний вид псевдокласса :visited

На скриншоте выше посещённым ссылкам задан красный цвет. Ссылки окрасились в него автоматически как только по ним перешли. По первой ссылке ещё не кликали поэтому она стандартного цвета.

У этого свойства есть ряд ограничений. Из-за этого его редко используют в реальной практике.

Пример 🔗

Цвет посещённой ссылки будет фиолетовым, а непосещённой — зелёным.

a {
color: green;
}

a:visited {
color: purple;
}

Как пишется 🔗

К селектору, выбирающему ссылки на странице, добавляем двоеточие и ключевое слово visited.

a:visited {
} /* Селектор ссылки по тегу + :visited */
.link:visited {
} /* Селектор ссылки по классу + :visited */
li .link:visited {
} /* Составной селектор ссылки, вложенной в пункт списка + :visited */
#id:visited {
} /* Селектор ссылки по тегу + :visited */
.link:visited:before {
} /* Селектор ссылки по классу + :visited + псевдоэлемент */

Как это понять 🔗

Браузер отслеживает по каким ссылкам на странице кликнул пользователь и подставляет фантомный класс :visited тем из них, по которым был совершён переход на другую страницу. При этом весь механизм присвоения этого класса скрыт под капотом браузера.

Ограничения 🔗

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

Для предотвращения злодеяний браузеры приняли решение, что ограничат стили, которые будут срабатывать для псевдокласса :visited. Вот список доступных свойств:

  • color,
  • background-color,
  • border-color,
  • border-bottom-color,
  • border-left-color,
  • border-right-color,
  • border-top-color,
  • outline-color,
  • column-rule-color,
  • fill,
  • stroke.

Любые другие стили будут игнорироваться. Так что не удивляйтесь, если что-то из написанного вами кода не будет работать.

Кроме того браузер проигнорирует цвета с альфа-каналом (прозрачностью, проще говоря) и прозрачность opacity.

Подсказки 🔗

💡 Смену стилей между состояниями можно анимировать при помощи transition 🎉

💡 Если дизайнер хочет применить для посещённой ссылки стили, которые не входят в перечень разрешённых — не стесняйтесь ему на это указать и пояснить, что его задумка технически не реализуема.

В работе 🔗

🛠 Если вы задаёте стили для разных состояний ссылок, то следует придерживаться определённого порядка в объявлении стилей: :link:visited:hover:active.

Этот порядок легко запомнить в виде аббревиатуры LVHA.

🛠 Из-за наложенных на этот псевдокласс ограничений он крайне редко используется в реальных проектах. Только там, где обязательно нужно выделять посещённые ссылки. Как правило это некий большой сборник ссылок на различные ресурсы. Нелюбовь к этому псевдоклассу передалась от разработчиков дизайнерам и они редко отрисовывают посещённые ссылки в макетах.

Автор: Алёна,