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

На скриншоте выше посещённым ссылкам задан красный цвет. Ссылки окрасились в него автоматически, как только по ним перешли. По первой ссылке ещё не кликали, поэтому она стандартного цвета.
У этого свойства есть ряд ограничений. Из-за этого его редко используют в реальной практике.
Пример
Секция статьи "Пример"Цвет посещённой ссылки будет фиолетовым, а непосещённой — зелёным.
a { color: green;}a:visited { color: purple;}
a { color: green; } a:visited { color: purple; }
Как пишется
Секция статьи "Как пишется"К селектору, выбирающему ссылки на странице, добавляем двоеточие и ключевое слово visited
.
Селектор ссылки по тегу в состоянии :visited
Секция статьи "Селектор ссылки по тегу в состоянии :visited" a:visited { /* Стили */}
a:visited { /* Стили */ }
Селектор ссылки по классу + :visited
Секция статьи "Селектор ссылки по классу + :visited" .link:visited { /* Стили */}
.link:visited { /* Стили */ }
Составной селектор ссылки, вложенной в пункт списка, в состоянии :visited
Секция статьи "Составной селектор ссылки, вложенной в пункт списка, в состоянии :visited" li .link:visited { /* Стили */}
li .link:visited { /* Стили */ }
Селектор ссылки по тегу в состоянии :visited
Секция статьи "Селектор ссылки по тегу в состоянии :visited" #id:visited { /* Стили */}
#id:visited { /* Стили */ }
Селектор ссылки по классу в состоянии :visited
и её псевдоэлемент
Секция статьи "Селектор ссылки по классу в состоянии :visited и её псевдоэлемент" .link:visited::before { /* Стили */}
.link:visited::before { /* Стили */ }
Как это понять
Секция статьи "Как это понять"Браузер отслеживает, по каким ссылкам на странице кликнул пользователь, и подставляет фантомный класс
тем из них, по которым был совершён переход на другую страницу. При этом весь механизм присвоения этого класса скрыт под капотом браузера.
Ограничения
Секция статьи "Ограничения"С самого начала интернета браузеры могли присваивать псевдокласс
ссылкам. В какой-то момент истории злоумышленники научились собирать информацию о тех сайтах, на которые ходит пользователь, и использовать это для собственной выгоды. Подобный «шпионаж» осуществлялся довольно просто: на странице со ссылками запускался скрипт, который проверял стили ссылок и собирал все посещённые в свою базу.
Для предотвращения злодеяний браузеры приняли решение, что ограничат стили, которые будут срабатывать для псевдокласса
. Вот список доступных свойств:
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.
🛠 Из-за наложенных на этот псевдокласс ограничений он крайне редко используется в реальных проектах. Только там, где обязательно нужно выделять посещённые ссылки. Как правило, это некий большой сборник ссылок на различные ресурсы. Нелюбовь к этому псевдоклассу передалась от разработчиков дизайнерам и они редко отрисовывают посещённые ссылки в макетах.