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

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

Попробуйте

p {
  font-weight: bold;
}

a:link {
  color: forestgreen;
  text-decoration-color: hotpink;
}

<p>Pages that you might have visited:</p>
<ul>
  <li>
    <a href="https://developer.mozilla.org">MDN Web Docs</a>
  </li>
  <li>
    <a href="https://www.youtube.com/">YouTube</a>
  </li>
</ul>
<p>Pages unlikely to be in your history:</p>
<ul>
  <li>
    <a href="https://developer.mozilla.org/missing-2">Random MDN page</a>
  </li>
  <li>
    <a href="https://example.com/missing-2">Random Example page</a>
  </li>
</ul>

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

Синтаксис

:link {
  /* ... */
}

Примеры

По умолчанию большинство браузеров применяют к посещённым ссылкам специальное значение color. Поэтому в этом примере ссылки, вероятно, будут иметь особый цвет шрифта только до того, как вы их посетите. (После этого, чтобы снова увидеть их, вам потребуется очистить историю браузера.) Однако значения background-color, скорее всего, сохранятся, поскольку большинство браузеров по умолчанию не задают это свойство для посещённых ссылок.

HTML

<a href="#ordinary-target">This is an ordinary link.</a><br />
<a href="">You've already visited this link.</a><br />
<a>Placeholder link (won't get styled)</a>

CSS

a:link {
  background-color: gold;
  color: green;
}

Результат

Спецификации

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

См. также

• Псевдоклассы, связанные со ссылками: :visited, :hover, :active