:visited

Время чтения: меньше 5 мин

Кратко

Секция статьи "Кратко"

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

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

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

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

Пример

Секция статьи "Пример"

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

        
          
          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 {
  /* Стили */
}

        
        
          
        
      

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

Секция статьи "Как это понять"

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

Ограничения

Секция статьи "Ограничения"

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

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

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

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

Подсказки

Секция статьи "Подсказки"

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

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

На практике

Секция статьи "На практике"

Алёна Батицкая советует

Секция статьи "Алёна Батицкая советует"

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

  1. :link
  2. :visited
  3. :hover
  4. :active

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

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