Please note, this is a STATIC archive of website www.tutorialspoint.com from 11 May 2019, cach3.com does not collect or store any user information, there is no "phishing" involved.
Tutorialspoint

2 Answers
Samual Sam

Pseudo class is to show different state of an element or a css selector. visited pseudo class is to show that the link is already visited.

This pseudo class is mostly being associated with link.

Syntax

a:visited { color:green;}

Let's check the actual usage of :visited pseudo class with different scenarios, as follows -

Example

Live Demo

<html>
   <head>
      <style>
         a:visited { color:green;}
      </style>
   </head>
   <body>
      <a href="https://www.tutorialspoint.com">Click here to learn</a> 
   </body>
</html>

Explanation

When you first time see the link it will be shown with normal link color (Blue) and the link will turn green if this link has been visited once.

Example

Live Demo

<html>
   <head>
      <style>
	  /* setting default style to make the style visible for :visited state */
         a { background-color: white; border:1px solid white;}
         a:visited {border:yellow;}		
      </style>
   </head>
   <body>
      <a href="https://www.tutorialspoint.com">Click here to learn</a> 
   </body>
</html>

Explanation

In this example once the link is visited it will include border of 1px yellow in color to the link.

Example

Live Demo

<html>
   <head>
      <style>
         /* setting default style to make the style visible for :visited state */
         a { background-color: white; }
         a:visited { background-color: seagreen;}
      </style>
   </head>
   <body>
      <a href="https://www.tutorialspoint.com">Click here to learn</a> 
   </body>
</html>

Explanation

When you visit the link once it will change the background color to seagreen.

Styling restrictions

For privacy and security reasons visited pseudo class can work with limited set of css properties such as color, background-color, border-color, border-bottom-color, border-left-color, border-right-color, border-top-color, column-rule-color, outline-color and SVG attributes are fill and stroke.

Browser compatibility

Chrome Firefox Edge IE Safari Opera
1 1 Yes Yes 1 3.5

Advertisements

We use cookies to provide and improve our services. By using our site, you consent to our Cookies Policy.