Tutorials


CSS :link property


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.



Next Previous




@aCodeTutorials All Rights Reserved
privacy policy | about