CSS :link Pseudo Class

CSS :link Pseudo-Class

The :link pseudo-class in CSS targets unvisited links (<a> elements with an href attribute). It allows you to style links before they are clicked.

1. Syntax

selector:link {
  property: value;
}

Value	Description
:link	Styles an unvisited link.

✅ Important: The :link pseudo-class only applies to links that have not been visited.

2. Basic Example – Styling Unvisited Links

a:link {
  color: blue;
  text-decoration: none;
}

✅ All unvisited links will appear blue and without an underline.

3. Example – Changing Styles for Different Link States

a:link {
  color: blue;  /* Unvisited links */
}

a:visited {
  color: purple; /* After clicking */
}

a:hover {
  color: red;  /* When hovering */
}

a:active {
  color: green;  /* When clicking */
}

<a href="https://example.com">Click Me</a>

✅ The link:

• Blue (unvisited)

• Purple (visited)

• Red (hover)

• Green (active)

4. Best Practices for Link Styling

✔ Use :link and :visited before :hover and :active.
✔ Combine with text-decoration: none; to remove underlines.
✔ Use :hover for user-friendly interactivity.

a {
  text-decoration: none;
}

a:link, a:visited {
  color: #007bff;  /* Default link color */
}

a:hover {
  color: #0056b3;  /* Darker blue on hover */
}

a:active {
  color: #ff5733;  /* Orange when clicked */
}

5. When to Use :link?

• To differentiate unvisited links.

• When styling navigation menus or buttons.

• When you need strict control over link appearance.