W3docs
en
Log in

CSS :link Pseudo Class

Learn how the CSS :link pseudo-class targets unvisited links, why LVHA rule order matters, and how to style all four link states with working examples.

The :link pseudo-class selects and styles unvisited links — links the user has not clicked yet (or that the browser has cleared from its history). It is one of the four "link state" pseudo-classes you use to control how links look as a user interacts with them.

This page explains what :link matches, how it differs from the bare a selector, why the order of link rules matters, what browser privacy restrictions affect related pseudo-classes, and shows runnable examples for each link state.

The :link pseudo-class matches every unvisited <a>, <area>, or <link> element that has an href attribute. An <a> without an href is not a hyperlink and is not matched by :link or :visited.

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

A link is in exactly one of two history states at a time: it is either unvisited (:link) or visited (:visited). These two pseudo-classes are mutually exclusive — a single link can never match both at the same time.

This is a common source of confusion. The difference comes down to scope:

  • a selects every <a> element, regardless of whether it has an href or what its history state is.
  • a:link selects only <a> elements that have an href and are unvisited.
/* Applies to every <a>, including those without an href */
a {
  font-family: sans-serif;
}

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

Use the bare a for base typography that applies to all anchors. Use a:link when you need to target only unvisited hyperlinks — for example, to distinguish them from visited ones.

Info

If you want the same style on every link regardless of visit state, style the bare a element instead of a:link. Using only a:link would leave visited links completely unstyled (relying on browser defaults) unless you also write an a:visited rule.

The LVHA order: why rule order matters

The four link pseudo-classes — :link, :visited, :hover, and :active — can all apply to the same element simultaneously. Because they share the same specificity (0,1,0), the last matching rule in the source wins. Writing them in the wrong order causes a later rule to silently cancel an earlier one.

The safe, conventional order is LVHA — Link, Visited, Hover, Active (mnemonic: "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 */

Why this order works:

  • :hover comes after both :link and :visited so the hover color shows whether the link has been visited or not.
  • :active comes last so it wins during the brief moment of a click, even if :hover also matches at the same time.

If you reversed :link and :hover, the :link color would override the hover color on unvisited links, and hovering would appear to do nothing.

Warning

For privacy reasons, browsers heavily restrict what you can change with :visited. Only color-related properties (color, background-color, border-color, column-rule-color, outline-color) take effect, and computed values are not exposed to JavaScript. This prevents pages from detecting which URLs a user has visited before. Do not rely on :visited for layout, size, or content changes — they will silently have no effect.

Specificity

:link has a specificity of (0,1,0) — one pseudo-class. This is the same specificity as :visited, :hover, :focus, and :active, which is why order matters so much (see LVHA above). Adding a type selector raises specificity to (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;
}

Keyboard focus and accessibility

:link and :visited cover mouse and pointer interaction, but keyboard users navigate links with the Tab key. Style the :focus state too, so keyboard users see a clear visual indicator:

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; }
Info

Color alone is not enough to indicate a link — approximately 1 in 12 people perceive color differently, and touch-screen users never see :hover styles. Keep an underline (or another non-color cue such as a border or icon) on links inside body text. See text-decoration for controlling underlines.

Syntax

selector:link {
  /* CSS declarations */
}

The most common form is a:link, but :link is valid on any element that can be a hyperlink:

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

Examples

<!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>
Try it Yourself »

This example applies distinct colors to all four link states. Mouse over or click the link to see each state in action.

<!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>
Try it Yourself »

Each link below demonstrates a different CSS property that can change on hover, combined with :link and :visited for the default and visited states.

<!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>
Try it Yourself »

Browser compatibility

:link is supported in all modern browsers and has been part of CSS since CSS1. There are no known compatibility gaps for basic usage. The privacy restrictions on :visited described above have been in place since 2010 across all major browsers.

  • :visited — style links the user has already opened.
  • :hover — style an element while the pointer is over it.
  • :active — style a link during the moment it is clicked.
  • :focus — style a link when it receives keyboard focus.
  • text-decoration — control the underline and other link decorations.
  • color — set the text color of links in each state.
  • The <a> tag — the HTML element :link most often targets.

Practice

Practice
In CSS, what are the different link states that can be styled?
In CSS, what are the different link states that can be styled?
Was this page helpful?