Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

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?

like image 551
Sunny Avatar asked Dec 03 '14 03:12

Sunny


People also ask

What is the difference between link and visited?

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.

What are visited and unvisited links?

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.

What is the appearance of a visited link?

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.


1 Answers

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.

like image 141
Shrey Gupta Avatar answered Oct 11 '22 19:10

Shrey Gupta