CSS :link Pseudo-class

Definition and usage

CSS :link Pseudo-classes are used to select and set the styles for unvisited links.

Note::link Pseudo-classes do not set the style for visited links.

Tip:Using :visited Set the link style for visited pages, using :hover Set the link style when hovered over, using :active Set the link style when clicked.

Note:in CSS definitions,:link Must be placed :hoverbefore it takes effect!

Example

Example 1

Select and set the styles for unvisited links:

a:link {
  background-color: yellow;
}

Try it yourself

Example 2

Select and set the styles for unvisited, visited, hovered, and active links:

/* Unvisited link */
a:link {
  color: green;
}
/* Visited link */
a:visited {
  color: green;
}
/* Hovered link */
a:hover {
  color: red;
}
/* Active link */
a:active {
  color: yellow;
}

Try it yourself

Example 3

Set different styles for links:

a.ex1:hover, a.ex1:active {
  color: red;
}
a.ex2:hover, a.ex2:active {
  font-size: 150%;
}

Try it yourself

CSS Syntax

:link {
  css declarations;
}

Technical details

Browser support

The numbers in the table indicate the first browser version to fully support the pseudo-class.

Related pages

Tutorial:CSS Links

Tutorial:CSS Pseudo-classes