The :visited CSS pseudo-class represents links that the user has already visited. For privacy reasons, the styles that can be modified using this selector are very limited.
The :visited CSS pseudo-class represents links that the user has already visited. For privacy reasons, the styles that can be modified using this selector are very limited.
Styles defined by the :visited pseudo-class will be overridden by any subsequent link-related pseudo-class (:link, :hover, or :active) that has at least equal specificity. To style links appropriately, put the :visited rule after the :link rule but before the :hover and :active rules, as defined by the LVHA-order: :link — :visited — :hover — :active.
For privacy reasons, browsers strictly limit which styles you can apply using this pseudo-class, and how they can be used:
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.fill and stroke.:visited state will be used instead. In Firefox when the alpha component is 0, the style set in :visited will be ignored entirely.window.getComputedStyle method will lie and always return the value of the non-:visited color.<link> element is never matched by :visited.Note: For more information on these limitations and the reasons behind them, see Privacy and the :visited selector.
visited
Properties that would otherwise have no color or be transparent cannot be modified with :visited. Of the properties that can be set with this pseudo-class, your browser probably has a default value for color and column-rule-color only. Thus, if you want to modify the other properties, you'll need to give them a base value outside the :visited selector.
<a href="#test-visited-link">Have you visited this link yet?</a><br> <a href="">You've already visited this link.</a>
a { /* Specify non-transparent defaults to certain properties, allowing them to be styled with the :visited state */ background-color: white; border: 1px solid white; } a:visited { background-color: yellow; border-color: hotpink; color: hotpink; }
| Specification |
|---|
| HTML Standard # selector-visited |
| Selectors Level 4 # link |
| Desktop | Mobile | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet | |
:visited |
1 |
12 |
1 |
4 |
3.5 |
1 |
4.4 |
18 |
4 |
10.1 |
1 |
1.0 |
not_match_link |
1 |
12 |
87 |
No |
15 |
No
Safari currently matches
<link> elements with link pseudo-classes. See Bug: 220740. |
4.4 |
18 |
87 |
14 |
No
Safari currently matches
<link> elements with link pseudo-classes. See Bug: 220740. |
1.0 |
privacy_measures |
6 |
12 |
4 |
8 |
15 |
5 |
37 |
18 |
4 |
14 |
4.2 |
1.0 |
:link, :active, :hover