Difference between "a" and "a:link"

Question

What is the difference between a and a:link, and when do I use one over the other?

@minitech: Be careful with specificity - classes and pseudo-classes are equal, which may be good or bad depending on how you write your selectors. I generally make it a point to use it for styles I know won't change in any of the other link states, and use overrides only when necessary. For example, certain font styles, or something more advanced - transitions. — BoltClock, Apr 28 '12 at 03:56

score 16 · Accepted Answer · edited Apr 28 '12 at 06:53

16

a:link is specifically for links that have not been visited. a applies to all <a> elements.

edited Apr 28 '12 at 06:53

BoltClock

700,868
160
1,392
1,356

answered Apr 28 '12 at 03:26

John Conde

217,595
99
455
496

7

"links" for the purposes of `:link` and `:visited` are defined in HTML 4 as `` elements with a `href` attribute. In other words, `a:link, a:visited` matches exactly the same elements as `a[href]`, whereas `a` matches any elements regardless of whether the attribute is present. This definition is informatively mentioned in [the CSS2.1 selectors spec](http://www.w3.org/TR/CSS21/selector.html#link-pseudo-classes). – BoltClock Apr 28 '12 at 03:28
I wasn't 100% sure about that so I didn't include it in my answer. Thank you for sharing. That's good to know. – John Conde Apr 28 '12 at 03:30
:link specifies anchor elements whose targets (href attribute) have not been visited. :visited targets anchor elements whose targets have been visited. :link and :visited are mutually exclusive; – albert Apr 28 '12 at 04:27

score 4 · Answer 2 · edited Apr 28 '12 at 06:54

John Conde’s answer and comments to it describe well the meanings of the selectors, but to address the question as asked I think we need to add these:

The selector a:link is more specific than a. This is evident when you think about it, but it might be missed when considering the effects of several CSS rules that apply to an element.

If you want to set properties on links in general (e.g., the font face of links), using a is simplest if you can ensure that a elements without href attributes do not appear. (It has been common to set destinations for links using a elements with a name attribute, normally without an href attribute; the more modern approach is to use the id attribute on any suitable element.)

But in most cases, it is best to use both :link and :visited, to avoid the risk of styling a elements that are not links. You would then use :link, :visited {...} to set properties for all links and :link {...} and :visited {...} to set properties for unvisited links and for visited links separately (typically, different colors for them).

The difference between :link and a:link, apart from specificity, is that :link covers elements that are classified as links. Although currently only a elements can create links, this might change in a future version of HTML.

Your answer inspired me to write up something in even greater detail :) http://stackoverflow.com/questions/10587245/is-there-a-reason-to-use-a-instead-of-alink-or-avisited-in-my-stylesheet/10589840#10589840 — BoltClock, May 14 '12 at 19:39

Difference between "a" and "a:link"

2 Answers2

Linked

Related