[CSS Selector] E:visited

Using 'selector:visited' applies styles to elements whose link destination has been visited. Since it targets elements that have a link destination, it is mainly used on 'a' elements. This is generally called a 'pseudo-class' (the :visited pseudo-class).

It may be overridden by other pseudo-classes, so the order in which they are written matters. Writing them in the order ':link', ':visited', ':hover', ':active' (the 'LVHA' order) will prevent conflicts.

In particular, ':visited' needs to be written after ':link'.

Overview

Sample Code

/* Basic: unvisited blue, visited purple (close to browser default) */
a:link { color: #0000ee; }
a:visited { color: #551a8b; }

/* Change text color of visited links (written in LVHA order) */
a:link { color: red; }
a:visited { color: orange; }
a:hover { color: green; }
a:active { color: blue; }

/* Set background-color for visited links */
a:visited { color: gray; background-color: #f0f0f0; }

Browser Display Result

a:visited { color: red;} /* Sets the text color of visited links to red. */

<p><a target="_top" href="https://www.google.co.jp/">Goes to Google. After visiting and returning, the color will change.</a></p>

a:link { color: blue;}
a:visited { color: gray;}

<p><a target="_top" href="https://www.yahoo.co.jp/">The text color turns gray once visited.</a></p>

a:link { color: #0000ee; background-color: transparent;}
a:visited { color: #551a8b; background-color: #f0f0f0;}

<p><a target="_top" href="https://www.wikipedia.org/">The background color also changes once visited.</a></p>

Common Mistakes

Writing :visited before :link causes styles to be overridden

Pseudo-class declaration order matters. Writing ':visited' before ':link' may cause ':link' to override ':visited' styles due to CSS cascade. Writing them in LVHA order (:link → :visited → :hover → :active) is the standard approach.

/* NG: :visited may be overridden by :link */
a:visited { color: gray; }
a:link { color: blue; }

/* OK: Write in LVHA order */
a:link { color: blue; }
a:visited { color: gray; }
a:hover { color: green; }
a:active { color: red; }

Privacy restrictions prevent some properties from being applied

Due to browser privacy protections, only color-related properties (color, background-color, border-color, outline-color) can be applied to ':visited'. Other properties such as font or padding are typically not applied.

/* OK: Color properties can be applied to :visited */
a:visited { color: purple; background-color: #f0f0f0; }

/* NG: font-weight and padding are not applied to :visited */
a:visited { font-weight: bold; padding: 5px; }

Browser Compatibility

Desktop

Chrome

1+ ○

Firefox

1+ ○

Safari

1+ ○

Edge

12+ ○

IE

11 ○

10 ○

9 ○

8 ○

7 ○

6 ○

Opera

3.5+ ○

2 and earlier ×

Mobile

iOS Safari

1+ ○

Android Browser

4.4+ ○

3 and earlier ×

Chrome Android

Latest ○

Same support as desktop

Firefox Android

Latest ○

Same support as desktop

※ Version data is based on MDN.

Home

Tweet

シェアする