CSS - Pseudo-class :visited



The CSS pseudo-class :visited is used to style links that have been visited by the user.

  • It's important to note that the :visited pseudo-class only applies to <a> and <area> elements that have an href attribute. This ensures that only clickable links are affected by the :visited selector.

  • The order of pseudo-classes is crucial in CSS because they can override each other based on specificity and order of declaration.

  • Styles specified by the :visited and unvisited :link pseudo-classes can be overridden by any subsequent user action pseudo-class (:hover or :active) with the same or higher specificity.

  • The LVHA (Link, Visited, Hover, Active) order is a guideline to ensure that styles are applied appropriately to different states of links based on the user's interactions with the links.

Here is a detailed explanation of the LVHA order:

  • :link - This pseudo-class styles links that have not yet been visited.

  • :visited - This pseudo-class styles links that have been visited.

  • :hover - This pseudo-class styles links when the user hovers over them.

  • :active - This pseudo-class styles links when they are being activated (e.g. clicked).

Syntax

:visited {
   /* css declarations */
 }

CSS :visited Example

The following example demonstrates how to use the :visited pseudo-class along with :link, :hover, and :active pseudo-classes to style different states of a link.

<html>
<head>
    <style>
        a:link {
            color: blue;
            text-decoration: none;
        }
        a:visited {
            color: purple;
            text-decoration: underline;
        }
        a:hover {
            color: red;
            text-decoration: underline;
        }
        a:active {
            color: green;
        }
    </style>
</head>
<body>
  <h1>Pseudo-class :visited Example</h1>
<a href="#test-visited-link" target="_blank">Unvisited Link</a><br>
    <a href="" target="_blank">Visited Link</a><br>
    <a href="" target="_blank">Hover Over Me</a><br>
    <a href="" target="_blank">Click Me</a>
</body>
</html>

Privacy Limitations

The limitations are imposed on the :visited pseudo-class due to privacy and security concerns in most modern web browsers.

  • Allowed CSS Properties: The :visited pseudo-class is restricted to modifying a specific set of CSS properties, including color, background-color, border-color, border-bottom-color, border-left-color, border-right-color, border-top-color, column-rule-color, outline-color, text-decoration-color, and text-emphasis-color.

  • Allowed SVG attributes: When dealing with SVG elements, the :visited pseudo-class can modify the fill and stroke attributes.

  • Limiting the alpha component: The alpha (transparency) component of styles is ignored. Instead, the alpha component from the non-:visited state of the element is used. In certain browsers, such as Firefox, when the alpha component is set to 0, styles applied in the : visited state can be completely ignored in certain cases.

  • Behavior of the Window.getComputedStyle method: The window.getComputedStyle method does not reflect styles applied with the :visited pseudo-class. It always returns the value of the non-:visited color.

  • :visited and <link> elements: The :visited pseudo-class does not target the <link> element. Consequently, styles applied with :visited do not affect elements, which are commonly used for external stylesheets.

These restrictions are intended to protect user privacy and prevent websites from reading sensitive browsing history information by manipulating the appearance of visited links.

Advertisements