:visited

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

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

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

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

        
          
          a {  color: green;}a:visited {  color: purple;}
          a {
  color: green;
}

a:visited {
  color: purple;
}

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

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

Селектор ссылки по тегу в состоянии :visited

        
          
          a:visited {  /* Стили */}
          a:visited {
  /* Стили */
}

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

Селектор ссылки по классу + :visited

        
          
          .link:visited {  /* Стили */}
          .link:visited {
  /* Стили */
}

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

Составной селектор ссылки, вложенной в пункт списка, в состоянии :visited

        
          
          li .link:visited {  /* Стили */}
          li .link:visited {
  /* Стили */
}

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

Селектор ссылки по идентификатору в состоянии :visited

        
          
          #id:visited {  /* Стили */}
          #id:visited {
  /* Стили */
}

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

Селектор ссылки по классу в состоянии :visited и её псевдоэлемент

        
          
          .link:visited::before {  /* Стили */}
          .link:visited::before {
  /* Стили */
}

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

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

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

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

• color,
• background-color,
• border-color,
• border-bottom-color или border-block-end-color,
• border-left-color или border-inline-start-color,
• border-right-color или border-inline-end-color,
• border-top-color или border-block-start-color,
• outline-color,
• column-rule-color,
• fill,
• stroke.

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

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

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

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

На практике

Скопировать ссылку "На практике" Скопировано

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

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

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

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

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

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

+ Развернуть