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
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.
- You use the
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.
- The
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
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.
- Browsers often have default styles for unvisited links, usually underlined and blue. Using
Order of Pseudo-Classes:
- Ensure that
:link
is listed before:visited
in your CSS to correctly apply the intended styles.
- Ensure that
Limited Styling:
- There are no specific limitations on the styles you can apply with
:link
. You can use it to set various properties likecolor
,font-size
,padding
, etc.
- There are no specific limitations on the styles you can apply with
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.
- JavaScript cannot directly access the visited state of links due to privacy concerns. The