:visited

The pseudo-class :visited is added to links that the user has already clicked on.

In the screenshot above, visited links are given a red color. The links changed to this color automatically as soon as the user clicked on them. The first link has not been clicked yet, so it remains its default color.

This property has a number of limitations. Because of this, it is not often used in real practice.

The color of the visited link will be purple, while the unvisited one will be green.

        
          
          a {  color: green;}a:visited {  color: purple;}
          a {
  color: green;
}

a:visited {
  color: purple;
}

        
        
          
            
            Copy
            Copied
            Failed to copy
          
        
      

To the selector targeting links on the page, add a colon and the keyword visited.

Selector for a link by tag in :visited state

        
          
          a:visited {  /* Styles */}
          a:visited {
  /* Styles */
}

        
        
          
            
            Copy
            Copied
            Failed to copy
          
        
      

Selector for a link by class + :visited

        
          
          .link:visited {  /* Styles */}
          .link:visited {
  /* Styles */
}

        
        
          
            
            Copy
            Copied
            Failed to copy
          
        
      

Composite selector for a link nested within a list item in :visited state

        
          
          li .link:visited {  /* Styles */}
          li .link:visited {
  /* Styles */
}

        
        
          
            
            Copy
            Copied
            Failed to copy
          
        
      

Selector for a link by ID in :visited state

        
          
          #id:visited {  /* Styles */}
          #id:visited {
  /* Styles */
}

        
        
          
            
            Copy
            Copied
            Failed to copy
          
        
      

Selector for a link by class in :visited state and its pseudo-element

        
          
          .link:visited::before {  /* Styles */}
          .link:visited::before {
  /* Styles */
}

        
        
          
            
            Copy
            Copied
            Failed to copy
          
        
      

The browser tracks which links on the page the user has clicked and applies the phantom class :visited to those links that have led to another page. The entire mechanism of assigning this class is hidden under the hood of the browser.

Since the beginning of the internet, browsers have been able to assign the pseudo-class :visited to links. At some point in history, attackers learned to collect information about the websites that users visit and use this for their own gain. Such "spying" was carried out quite simply: a script would run on the page with links, checking the styles of the links and gathering all visited links into its database.

To prevent wrongdoing, browsers decided to limit the styles that could trigger for the pseudo-class :visited. Here is a list of available properties:

• color,
• background-color,
• border-color,
• border-bottom-color or border-block-end-color,
• border-left-color or border-inline-start-color,
• border-right-color or border-inline-end-color,
• border-top-color or border-block-start-color,
• outline-color,
• column-rule-color,
• fill,
• stroke.

Any other styles will be ignored. So don't be surprised if something in your written code doesn't work.

Additionally, the browser will ignore colors with an alpha channel (transparency, in simpler terms) and opacity opacity.

💡 The change of styles between states can be animated using transition 🎉

💡 If a designer wants to apply styles to a visited link that are not on the list of allowed ones — do not hesitate to point this out and explain that their idea is technically unfeasible.

In practice

Copy the link "In practice"

Advice 1

Copy the link "Advice 1"

🛠 If you are setting styles for different states of links, you should adhere to a certain order in the declaration:

1. :link
2. :visited
3. :focus
4. :hover
5. :active

This order is easy to remember with the acronym LVFHA and the mnemonic LoVe Fears HAte.

🛠 Due to the limitations imposed on this pseudo-class, it is not often used in real projects. Only where it is absolutely necessary to highlight visited links. Typically, this is a large collection of links to various resources. The dislike for this pseudo-class has been passed from developers to designers, and they rarely render visited links in mockups.

+ Open