Why not :visited instead of a:visited for links?

Question

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?

Answer 1

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.

Answer 2

In theory it's the same for reasons already mentioned. On paper, a:visited vs :visited makes it explicit that the style only applies to anchors, and may potentially be faster: think of it as the browser needing to iterate through all a tags in the one hand side, and checking if :visited applies, vs doing the same for all tags in the DOM.

Imho though, the more important reason is that styles related to a tag, a pseudo-selector, a class and an identifier aren't necessarily applied in a consistent and predictable order from a browser to the next.

Suppose, for instance, this visited link:

<a id="foo" class="bar" href="...">visited link</a>

Then consider the following CSS:

#foo {
  color: red;
}

.bar {
  color: green;
}

:visited {
  color: purple
}

There used to be a time where the link would appear red, green or purple depending on the browser. (Perhaps it's still the case; I haven't tested.) Because, some would treat #foo as more important than .bar (it's an ID vs a class) and both of these as more important than :visited for similar reasons. Some would treat #foo, .bar and :visited as if they had the same importance, as a property of the tag itself. Some might have treated #foo and .bar as equals but more important than :visited on grounds the latter is a mere pseudo class. And so forth.

Now, consider this CSS, which is the kind of stuff you might encounter in a stylesheet today:

a.bar {
  color: green;
}

:visited {
  color: purple
}

Even assuming that tags, ID, classes and pseudo classes are all treated equal, we still have a potential problem, in that a.bar can also be considered more specific than plain :visited by some browsers.

Ergo, you end up needing to specify a:visited in the declaration to ensure the behavior is consistent in all browsers -- and chances are there are still a few bad apples around that'll make you want to write a:visited, a.bar:visited just to be sure.

Once you've run into the problem a few times, force of habit kicks in and you'll end up always writing a:hover or a:visited.

Answer 3

According to Selectors Level 4 :visited applies to any hyperlink, which in HTML is the <a>, <area> and <link> elements when they have an href attribute.

A quick test for the link element shows that Firefox at least partially respects this:

Try http://jsfiddle.net/rfdzpjLo/4/ in FF or see below

link:before { content:attr(href); }
link { display:block; }
:visited { color: red; }
:link { color:green; }

<link href="http://stackoverflow.com/questions/27263128/why-not-visited-instead-of-avisited-for-links" />
<link href="example.net/lsjhuehbsi00ejjdus" />

Answer 4

:visited is a pseudo class selector used only for anchor link elements that matches when the href attribute of that anchor link has been visited in the past by this browser. It is meant to be useful feedback for a user, so they can tell the difference between links they have been to and links they have not.

REFERENCE

The syntax of a pseudo class is as follows

selector:pseudo-class {
    property:value;
}

So you have to use a selector when using a pseudo class and since it supports only links, in this case, the selector would be a.

Answer 5

Yes, but it won't be future compatible if a new tag is introduced that may be styled with :visited.

Closest proof I can find:

http://www.w3.org/TR/CSS21/selector.html#link-pseudo-classes

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. Thus, the following two CSS 2.1 declarations have similar effect:

a:link { color: red }
:link  { color: red }