CSS :link Selector

Posted in CSS Tutorial

Updated on Sep 15, 2024

By Mari Selvan

👁️ 3 - Views

⏳ 4 mins

💬 0

Photo Credit to CodeToFun

🙋 Introduction

The CSS :link selector is used to target unvisited links on a webpage. It allows you to style hyperlinks that have not been clicked yet, helping differentiate between visited and unvisited links.

This is useful for enhancing user experience by visually guiding users through available links on your site.

💡 Syntax

The signature of the :link Selector is as follows:

Syntax

Copied

a:link {
    /* CSS properties */
}

The :link pseudo-class only applies to anchor (<a>) elements that have an href attribute and are in their unvisited state.

📝 Example

Here is a simple example of how to use the :link selector in CSS:

☠️ HTML

HTML

Copied

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS :link Selector Example</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <h1>Welcome to My Website</h1>
    <p>
        Visit the following links:
        <a href="https://www.example.com">Example</a><br>
        <a href="https://www.anotherexample.com">Another Example</a>
    </p>
</body>
</html>

🎨 CSS

CSS

Copied

/* Style for unvisited links */
a:link {
    color: blue;
    text-decoration: none;
    font-weight: bold;
}

/* Style for visited links */
a:visited {
    color: purple;
    text-decoration: underline;
}

In this example:

Unvisited links (:link) are displayed in blue, with no underline and bold text.
Once a link is clicked, the :visited state changes its color to purple and underlines the text.

💬 Usage Tips

Always pair the :link pseudo-class with the :visited pseudo-class to ensure a clear distinction between visited and unvisited links.
It's common to style links using the following order to avoid conflicts:
- :link
- :visited
- :hover
- :active

This order ensures that styles are applied consistently and according to CSS cascading rules.

⚠️ Common Pitfalls

The :link selector only applies to links that have an href attribute. If you omit the href or use a link without it, the :link pseudo-class won't work.
If you apply the same styles to both :link and :visited, users might not notice a difference between clicked and unclicked links. Always provide a distinct style for :visited links for better user experience.

🎉 Conclusion

The CSS :link selector is a handy tool for styling hyperlinks that have not been clicked. It allows for customization of unvisited links, enhancing the visual clarity and navigation of a webpage. By pairing it with other link-related pseudo-classes like :visited, you can create a consistent and engaging design for your website's links.