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

Псевдокласс :link используется для применения стиля к ссылкам, которые еще не посещались пользователем.

Элемент может быть :visited и :active, в случае которых псевдокласс :link будет иметь эффект.

Псевдокласс :link выбирает любой непосещенный элемент <a>, <area> или <link>, который имеет атрибут href.

Версия

CSS1

Синтаксис

:link {
css declarations;
}

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</title>
    <style>
      a:link {
      background-color: #ccc;
      }
    </style>
  </head>
  <body>
    <h2>Пример селектора :link</h2>
    <a href="https://www.w3docs.com">w3docs</a>
    <a href="https://stackdev.io/">Stackdev</a>
  </body>
</html>

Попробуйте сами!

Рассмотрим другой пример:

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</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</h2>
    <p>Visit our 
      <a href="https://www.w3docs.com/">website</a>.
    </p>
  </body>
</html>

Попробуйте сами!

В следующем примере наведите курсор мыши на ссылки и увидите результат сами:

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</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</h2>
    <p>
      <a class="one" href="#">Меняется цвет ссылки</a>
      <a class="two" href="#">Меняется размер шрифта ссылки</a>
      <a class="three" href="#">Меняется фоновый цвет ссылки</a>
      <a class="four" href="#">Меняется шрифт ссылки</a>
      <a class="five" href="#">Меняется текстовое оформление ссылки</a>
    </p>
  </body>
</html>

Попробуйте сами!


4.0+	12.0+	2.0+	3.1+	10.0+

4.0+

12.0+

2.0+

3.1+

10.0+

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

Версия

Синтаксис

Пример

Пример

Поддержка браузера

Практикуйте свои знания