CSS :link Псевдокласс

Псевдокласс :link выбирает и стилизует непосещённые ссылки — ссылки, по которым пользователь ещё не переходил (или которые браузер удалил из истории). Это один из четырёх псевдоклассов «состояния ссылки», с помощью которых управляют внешним видом ссылок при взаимодействии с ними.

На этой странице объясняется, что соответствует :link, чем он отличается от обычного селектора a, почему важен порядок правил для ссылок, какие ограничения конфиденциальности браузера влияют на связанные псевдоклассы, а также приведены рабочие примеры для каждого состояния ссылки.

Что соответствует :link

Псевдокласс :link соответствует каждому непосещённому элементу <a>, <area> или <link>, у которого есть атрибут href. Элемент <a> без href не является гиперссылкой и не соответствует ни :link, ни :visited.

/* Style every unvisited link */
a:link {
  color: #1c87c9;
  text-decoration: underline;
}

Ссылка одновременно находится только в одном из двух состояний истории: она либо непосещённая (:link), либо посещённая (:visited). Эти два псевдокласса являются взаимоисключающими — одна ссылка никогда не может соответствовать обоим одновременно.

:link против обычного селектора a

Это распространённый источник путаницы. Разница сводится к области действия:

• a выбирает каждый элемент <a>, независимо от наличия href и состояния истории.
• a:link выбирает только элементы <a>, у которых есть href и которые являются непосещёнными.

/* Applies to every <a>, including those without an href */
a {
  font-family: sans-serif;
}

/* Applies only to real, unvisited hyperlinks */
a:link {
  color: #1c87c9;
}

Используйте обычный a для базовой типографики, применяемой ко всем якорям. Используйте a:link, когда нужно нацелиться только на непосещённые гиперссылки — например, чтобы отличить их от посещённых.

Порядок LVHA: почему важен порядок правил

Четыре псевдокласса ссылок — :link, :visited, :hover и :active — могут применяться к одному элементу одновременно. Поскольку они имеют одинаковую специфичность (0,1,0), побеждает последнее соответствующее правило в источнике. Написание их в неправильном порядке приводит к тому, что более позднее правило тихо отменяет более раннее.

Безопасный, общепринятый порядок — LVHA: Link, Visited, Hover, Active (мнемоника: «LoVe, HAte»):

a:link    { color: #1c87c9; }  /* unvisited */
a:visited { color: #8ebf42; }  /* already visited */
a:hover   { color: #095484; }  /* pointer over the link */
a:active  { color: #666666; }  /* being clicked */

Почему этот порядок работает:

• :hover стоит после и :link, и :visited, поэтому цвет при наведении отображается независимо от того, была ли ссылка посещена или нет.
• :active стоит последним, поэтому он побеждает в краткий момент клика, даже если :hover тоже совпадает в тот же момент.

Если поменять местами :link и :hover, цвет :link будет перекрывать цвет при наведении для непосещённых ссылок, и наведение будет выглядеть так, будто ничего не происходит.

Специфичность

:link имеет специфичность (0,1,0) — один псевдокласс. Это та же специфичность, что у :visited, :hover, :focus и :active, поэтому порядок так важен (см. LVHA выше). Добавление селектора типа повышает специфичность до (0,1,1):

/* specificity (0,1,1) — type + pseudo-class */
a:link {
  color: #1c87c9;
}

/* specificity (0,2,1) — type + class + pseudo-class — wins */
a.nav-link:link {
  color: #ff6600;
}

Фокус с клавиатуры и доступность

:link и :visited охватывают взаимодействие мышью и указателем, но пользователи клавиатуры переходят по ссылкам с помощью клавиши Tab. Стилизуйте также состояние :focus, чтобы пользователи клавиатуры видели чёткий визуальный индикатор:

a:link    { color: #1c87c9; }
a:visited { color: #8ebf42; }
a:hover   { color: #095484; }
a:focus   { outline: 2px solid #095484; outline-offset: 2px; }
a:active  { color: #666666; }

Синтаксис

selector:link {
  /* CSS declarations */
}

Наиболее распространённая форма — a:link, но :link действителен для любого элемента, который может быть гиперссылкой:

a:link    { color: #1c87c9; }
area:link { outline: 2px dashed #1c87c9; }

Примеры

Базовая стилизация непосещённой ссылки

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      a:link {
        background-color: #ccc;
      }
    </style>
  </head>
  <body>
    <h2>:link selector example</h2>
    <a href="https://www.w3docs.com">w3docs</a>
    <a href="https://stackdev.io/">Stackdev</a>
  </body>
</html>

Все четыре состояния ссылки с порядком LVHA

В этом примере к четырём состояниям ссылки применяются разные цвета. Наведите указатель мыши или щёлкните по ссылке, чтобы увидеть каждое состояние в действии.

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      p {
        font-size: 20px;
      }
      /* unvisited link */
      a:link {
        color: #ccc;
      }
      /* visited link */
      a:visited {
        color: #1c87c9;
      }
      /* mouse over link */
      a:hover {
        color: #8ebf42;
      }
      /* selected link */
      a:active {
        color: #666;
      }
    </style>
  </head>
  <body>
    <h2>:link selector example</h2>
    <p>Visit our
      <a href="https://www.w3docs.com/">website</a>.
    </p>
  </body>
</html>

Несколько стилей ссылок с использованием псевдоклассов, нацеленных на классы

Каждая ссылка ниже демонстрирует отдельное CSS-свойство, которое меняется при наведении, в сочетании с :link и :visited для обычного и посещённого состояний.

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      a {
        display: block;
        padding: 5px 0 10px;
        font-weight: bold;
      }
      a.one:link    { color: #ccc; }
      a.one:visited { color: #095484; }
      a.one:hover   { color: #8ebf42; }

      a.two:link    { color: #ccc; }
      a.two:visited { color: #095484; }
      a.two:hover   { font-size: 150%; }

      a.three:link    { color: #ccc; }
      a.three:visited { color: #095484; }
      a.three:hover   { background: #8ebf42; }

      a.four:link    { color: #ccc; }
      a.four:visited { color: #095484; }
      a.four:hover   { font-family: monospace; }

      a.five:link    { color: #095484; text-decoration: none; }
      a.five:visited { color: #095484; text-decoration: none; }
      a.five:hover   { text-decoration: overline underline; }
    </style>
  </head>
  <body>
    <h2>:link selector example</h2>
    <p>
      <a class="one"   href="#">This link changes color</a>
      <a class="two"   href="#">This link changes font-size</a>
      <a class="three" href="#">This link changes background-color</a>
      <a class="four"  href="#">This link changes font-family</a>
      <a class="five"  href="#">This link changes text-decoration</a>
    </p>
  </body>
</html>

Совместимость с браузерами

:link поддерживается во всех современных браузерах и является частью CSS начиная с CSS1. Для базового использования известных проблем совместимости нет. Ограничения конфиденциальности для :visited, описанные выше, действуют с 2010 года во всех основных браузерах.

Связанные темы

• :visited — стилизация ссылок, которые пользователь уже открывал.
• :hover — стилизация элемента, когда над ним находится указатель.
• :active — стилизация ссылки в момент клика.
• :focus — стилизация ссылки, когда она получает фокус с клавиатуры.
• text-decoration — управление подчёркиванием и другими декорациями ссылок.
• color — задание цвета текста ссылок в каждом состоянии.
• Тег <a> — HTML-элемент, на который чаще всего нацеливается :link.

Практика