/ ↲
    Расширенный поиск

    CSS

    :visited

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

    1. Кратко
    2. Пример
    3. Как пишется
      1. Селектор ссылки по тегу в состоянии :visited
      2. Селектор ссылки по классу + :visited
      3. Составной селектор ссылки, вложенной в пункт списка, в состоянии :visited
      4. Селектор ссылки по тегу в состоянии :visited
      5. Селектор ссылки по классу в состоянии :visited и её псевдоэлемент
    4. Как это понять
    5. Ограничения
    6. Подсказки
    7. На практике
      1. Алёна Батицкая

    Кратко

    Псевдокласс :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. Вот список доступных свойств:

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

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

    Подсказки

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

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

    На практике

    Алёна Батицкая

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

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

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

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