totn CSS

CSS :visited selector

This CSS tutorial explains how to use the CSS selector called :visited with syntax and examples.

Description

The CSS :visited selector allows you to target visited links.

Syntax

The syntax for the :active CSS selector is:

a:visited { style_properties }

Parameters or Arguments

style_properties
Only the CSS styles related to color that can be applied to a visited link.

Note

  • The :visited selector is a pseudo-class that allows you to target a link that has been visited.
  • Due to privacy, there are only a few color styles that can be applied using the :visited selector, such as background-color, color, border-color, outline-color.
  • See also the :link and :hover selectors.

Browser Compatibility

The CSS :visited selector has basic support with the following browsers:

  • Chrome
  • Firefox (Gecko)
  • Internet Explorer (IE)
  • Opera
  • Safari (WebKit)

Example

We will discuss the :visited selector below, exploring examples of how to use this selector in CSS to apply styling to an <a> tag that has been visited.

With <a> tag

Let's look at a CSS :visited example where we apply the :visited selector to the <a> tag.

The CSS would look like this:

a:visited { background: yellow; }

The HTML would look like this:

<div>
  <p>Here is a great site: <a href="https://www.checkyourmath.com/index.php">CheckYourMath.com</a></p>
</div>

When the <a> tag has not visited, it would look like this:

CSS

Then once you visit the <a> tag, the :visited selector would style the <a> tag as follows:

CSS

In this :visited example, the link "CheckYourMath.com" will have a yellow background only when the link has been visited.

Share on: