visited pseudo class in CSS

CSSWeb DevelopmentFront End Technology

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

ChromeFirefoxEdgeIESafariOpera
11YesYes13.5
raja
Published on 24-Sep-2018 13:22:38
Advertisements