Every example and stylesheet I've looked at uses a:visited
to style links. Besides a:visited
having higher specificity, shouldn't :visited
be equivalent and simpler?
a:link if for an unvisited link, while a:visited is for a link that the user has visited. Usually the user will want some way to differentiate between the two in which case you'll style them separately. If you don't want any differences (e.g. a menu) then just a will do.
Definition and UsageThe :visited selector is used to select visited links. Tip: Use the :link selector to style links to unvisited pages, the :hover selector to style links when you mouse over them, and the :active selector to style links when you click on them.
By default, a link will appear like this (in all browsers): An unvisited link is underlined and blue. A visited link is underlined and purple. An active link is underlined and red.
TL;DR: At the time of writing, you are completely correct; there is no difference between a:visited
and :visited
. However, using a:visited
is best practice for future-proofing your code.
TL;DR EDIT: As of August 2016, the CSS4 Working Draft allows other tags to use :visited
. There is now a functional difference between a:visited
and :visited
! Beware.
For web development languages today, specifically HTML5 and CSS3, you are right: there is functionally no difference between a:visited
and :visited
. Now, please take this with caution: web standards, elements, and user interface protocols are ever-evolving, meaning that in the future, it is possible that a new tag compatible with :visited
may be introduced.
When :visited
was introduced in CSS, the W3C CSS1 spec said:
In CSS1, anchor pseudo-classes have no effect on elements other than 'a'. Therefore, the element type can be omitted from the selector:
a:link { color: red }
==:link { color: red }
HOWEVER, in the CSS2 spec, the behavior of the :visited
pseudo-class was not restricted to just a
tags:
The document language determines which elements are hyperlink source anchors. For example, in HTML4, the link pseudo-classes apply to
a
elements with an "href" attribute.
This means that it is up to the document language and browser to determine which elements are compatible with :visited
. While the current industry standard states that for HTML, only a
elements with an href
attribute qualify, this may well change later down the line.
EDIT, August 2016: Looks like the CSS4 Working Draft has confirmed my suspicion; in the new spec, :visited
can be used for other "link-like" elements, namely <area>
and <link>
. The spec says:
The :any-link pseudo-class represents an element that acts as the source anchor of a hyperlink. For example, in [HTML5], any
<a>
,<area>
, or<link>
elements with an href attribute are hyperlinks.
So <a>
, <area>
, and <link>
are all treated as hyperlinks, and the spec says that :visited
applies to all hyperlinks. So as of CSS4, you'll be better off including the a
in a:visited
.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With