CSS :visited

The :visited pseudo-class in CSS allows you to apply styles to links that have already been visited by the user. This can help to distinguish between new and previously visited links on a web page. Below, we'll explore how to use the :visited pseudo-class with examples.

Understanding :visited

Links in HTML are defined using the <a> tag. This pseudo-class can be applied to these anchor tags to change their appearance once they have been clicked. For instance, you can change the color of visited links to indicate they have been accessed.

Result:

Here is an example of how to style visited links:

Visit Example

Click the link above to visit the page, and then observe the changes in style!


/* CSS Styling */
a {
    color: blue; /* Default color for links */
    text-decoration: none; /* Remove underline */
}

a:visited {
    color: purple; /* Color for visited links */
}

Example in Action

Below is a complete example that demonstrates the usage of the :visited pseudo-class. The visited link will change color after it has been clicked.

Result: Visit Example


<style>
  a {
  color: blue; /* Default link color */
  text-decoration: none; /* No underline */
  }
  a:visited {
  color: purple; /* Color for visited links */
  }
  </style>

 <h1>Testing Visited Links</h1>
  <p>Click the link below to visit it:</p>
  <a href="https://example.com">Example Link</a>

Do note that due to privacy concerns, browsers limit the styles that can be applied to visited links. You can only change certain properties like color and background-color, but you cannot use styles like display, width, or height.

Conclusion

In summary, the :visited pseudo-class is helpful for providing visual feedback to users about which links they have visited. Proper use of this feature can enhance usability on web pages.