a vs a:link

[emma]

Hi all,

Just a really quick question. What is the difference between using

a	 	 { color:#999; }

or

a:link	 { color:#999; }

in a stylesheet? Which one “should” I use?

Thanks!

[Johann]

Plain a also applies to anchor that don’t have a href attribute set, while a:link only applies to anchor tags that have one.

As to which one you should use, if you don’t need that distinction, you don’t really need to specify :link I guess… just keep in mind that if there are definitions for both a and a:link, a:link will be used where appropriate since it is more specific — that caused confusion for me before.

[joshuanhibbert]

@Johann is spot on. I never use a:link (but I don’t use anchors without hrefs). Not sure why @tannercampbell attempted to further clarify, his information is not entirely accurate; you do not need to use a:link, using a on its own is almost always fine.

[Johann]

One thing that occured to me before, but which I didn’t use yet, is using anchor tags without hrefs for javascript “links” (buttons that do stuff without going to a new page) – not because it makes any sense semantically, but because it’s a one character tag instead of a class, which easily wins over semantics for me :P

But I always thought that then the hover state would be the same for both. Now I fiddled a bit:

http://jsfiddle.net/sqpPs/

Yay! D’oh, too :D

Also perhaps of interest:

Eric Meyer: Who Ordered the Link States?

[joshuanhibbert]

@Johann you would also need to use cursor: pointer; for the anchors with no hrefs.

[Johann]

Yeah, I always forget that :D

[emma]

Thanks very much for your replies, much appreciated. I’ve never used a:link before and this just clarified that I probably never will either! It is just another one of those little css things that I’ve always wondered about but never really taken the time to look into :)

[Author]

Posts