Grow your CSS skills. Land your dream job.

:link

Last updated on:

The :link selector is a pseudo-class that targets all unvisited anchor (<a>) elements on a page.

a:link {
  color: aquamarine;
}

The example above will change the color of all unvisited links to aquamarine.

When used in combination with the :hover pseudo-class, :link must appear first, or else not be defined at all, in order for the :hover styles to work. This is because the are equally specific, so if :link came after, those style would override the hover styles.

The :link pseudo-class will target all <a> elements that have an href attribute, even if the href has an empty value. So in that sense it is like the attribute selector [href].

This means the following three HTML elements are all able to be styled via the :link pseudo-class:

<a href="http://css-tricks.com">CSS-Tricks</a>

<a href="">CSS-Tricks</a>

<a href>CSS-Tricks</a>

The third example in the above code block, however, would be invalid HTML.

There are only three HTML elements that accept the href attribute: <a>, <link>, and <area>. Only the <a> element can be styled via the :link pseudo-class.

Also, you cannot add the href attribute to another type of element and make it style-able via :link. In other words, if you had the following HTML:

<div href="http://css-tricks.com">CSS-Tricks</div>

The following CSS would have no effect:

div:link {
  color: aquamarine;
}

Again, the HTML would fail validation, since href is not a valid attribute for <div>.

Due to the fact that :link can target only <a> elements, :link styles can be defined in the CSS without the <a> element type selector, like this:

:link {
  color: aquamarine;
}

Also, for all practical purposes when using HTML, the :link pseudo-class is somewhat irrelevant since the same effect can be achieved by simply targeting all <a> elements directly:

a {
  color: aquamarine;
}

However, if there are any <a> elements on the page that don't have the href attribute set (for example, on legacy pages that used <a name="example"></a>), the above code would target those elements too, and this may not be the desired result.

It should also be pointed out that, starting with CSS2, other document languages (besides HTML) may define other elements, besides anchors, that can be styled via the :link pseudo-class.

Related Properties

Other Resources

Browser Support

Chrome Safari Firefox Opera IE Android iOS
Any Any Any Any Any Any Any

Leave a Comment

Posting Code

Markdown is supported in the comment area, so you can write inline code in backticks like `this` or multiline blocks of code in in triple backtick fences like ```this```. You don't need to escape code in backticks, Markdown does that for you.

Sadly, it's kind of broken. WordPress only accepts a subset of HTML in comments, which makes sense, because certainly some HTML can't be allowed, like <script> tags. But this stripping happens before the comment is processed by Markdown (via Jetpack). It seems to me that would be reversed, because after Markdown processes code in backticks, it's escaped, thus safe. If you think you can fix this issue, get in touch!

If you need to make sure the code (typically HTML) you post absolutely posts correctly, escape it and put it within <pre><code> tags.

Current ye@r *

*May or may not contain any actual "CSS" or "Tricks".