:link Pseudo Class - CSS Portal

:link CSS Pseudo Class

If this site has been useful, we’d love your support! Consider buying us a coffee to keep things going strong!

Description

The :link pseudo-class in CSS is used to select and style all unvisited hyperlinks on a webpage. Essentially, it targets any anchor element (a) that has an href attribute and has not yet been clicked by the user. This allows web developers to differentiate the appearance of links that the user has not interacted with from those they have already visited, improving both usability and visual feedback.

Unlike regular class or ID selectors, :link is dynamic; it depends on the user’s interaction history with the page. It is often used in combination with other pseudo-classes like :visited, :hover, and :active to create a full range of visual states for hyperlinks. For instance, it is common to style :link with a distinct color to indicate that a link has not yet been visited, and then change the color for :visited links to signal to users which pages they have already accessed.

Developers can use standard CSS properties to customize :link elements, such as color, text-decoration, font-weight, or background-color. It is important to note that the order of link-related pseudo-classes in CSS matters; the recommended sequence is often remembered by the mnemonic “LVHA” - :link, :visited, :hover, :active - to ensure styles cascade correctly.

Here’s a simple example demonstrating the use of :link:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>:link Example</title>
  <style>
    a:link {
      color: blue;
      text-decoration: none;
    }
    a:visited {
      color: purple;
    }
    a:hover {
      text-decoration: underline;
    }
    a:active {
      color: red;
    }
  </style>
</head>
<body>
  <p>Check out this <a href="https://www.example.com">example link</a>!</p>
</body>
</html>

In this example, the unvisited link appears in blue without an underline, a visited link turns purple, hovering over the link underlines it, and clicking it turns the text red. This demonstrates how :link integrates into the full set of link-related pseudo-classes to control user interaction states effectively.

Syntax

:link {
  /* ... */
}

Example

HTML

<body>



    <h2>Navigation Menu</h2>

    <nav>

        <a href="https://www.google.com">Google</a>

        <a href="https://www.wikipedia.org">Wikipedia</a>

        <a href="https://www.nonexistent-site-123.com">Unvisited Secret Link</a>

    </nav>



</body>

CSS

/* Target only links that have not been visited yet */

a:link {

    color: #1a73e8;          /* A bright blue color */

    text-decoration: none;    /* Removes the default underline */

    font-weight: bold;

    border-bottom: 2px solid transparent;

    transition: border-bottom 0.3s ease;

}



/* Optional: Adding a hover state for better UX */

a:hover {

    border-bottom: 2px solid #1a73e8;

}

Result

Editor

Browser Support

The following information will show you the current browser support for the CSS :link pseudo class. Hover over a browser icon to see the version that first introduced support for this CSS psuedo class.