The :link pseudo-class in CSS is used to style unvisited links, which are anchor (<a>) elements that point to a URL that the user has not yet accessed. It allows you to apply specific styles to links before they are visited, providing a visual cue about their current status.

Syntax

a:link { /* styles */ }
  • a: The selector targets anchor (<a>) elements.
  • :link: The pseudo-class applies styles to links that have not yet been visited by the user.

How It Works

  1. Basic Usage:

    • You use the :link pseudo-class to define styles for links that the user has not clicked on yet.
    a:link { color: blue; text-decoration: none; }
    • In this example, unvisited links are styled with a blue color and no underline.
  2. Order of Pseudo-Classes:

    • The :link pseudo-class should be used before the :visited pseudo-class in your CSS. This order ensures that the styles for unvisited links are applied first.
    a:link { color: blue; } a:visited { color: purple; }
    • In this case, unvisited links are blue, while visited links are purple.

Example

HTML

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <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> <a href="https://www.example.com">Visit Example</a> <a href="https://www.example2.com">Visit Example 2</a> </body> </html>

Explanation:

  • a:link:

    • Styles unvisited links with a blue color and no underline.
  • a:visited:

    • Changes the color of visited links to purple.
  • a:hover:

    • Adds an underline to links when the user hovers over them.
  • a:active:

    • Changes the color of links to red while they are being clicked.

Important Points

  1. Default Styles:

    • Browsers often have default styles for unvisited links, usually underlined and blue. Using :link, you can customize these default styles to better match your design.
  2. Order of Pseudo-Classes:

    • Ensure that :link is listed before :visited in your CSS to correctly apply the intended styles.
  3. Limited Styling:

    • There are no specific limitations on the styles you can apply with :link. You can use it to set various properties like color, font-size, padding, etc.
  4. CSS and JavaScript:

    • JavaScript cannot directly access the visited state of links due to privacy concerns. The :link pseudo-class is a CSS-only solution for styling unvisited links.