views:

98

answers:

3

Isn't the "a:link" pseudoclass redundant with "a" when put in that order (:link, :visited, :hover, :active)? Why put this:

a:link {color: blue;}
a:visited {color: purple;}
a:hover {color: red;}
a:active {color: yellow;}

When you could just put this:

a {color: blue;}
a:visited {color: purple;}
a:hover {color: red;}
a:active {color: yellow;}

I ask because the first one is the most common example I see of the LVHA order. The second version has the same specificity, so it functions the same way. Is it just an organizational thing to make clear what's changing when the link state changes? What am I missing?

+9  A: 

Not all anchor tags necessarily have a href attribute, so they're not all links. Presumably the link pseudoclass does not apply to anchor tags without a href.

Ben James
<a>'s without href's are often javascript hooks.
CrazyJugglerDrummer
Or anchors for old browsers, `<a name="anchor"/>`
Harmen
I did a quick test, and that is indeed the case. The `link` pseudoclass doesn't apply to anchor tags without a `href`.
Isley Aardvark
+2  A: 

According to the W3C specification:

The :link pseudo-class applies for links that have not yet been visited.

:link allows you to style unvisited links while leaving other link styles unaffected.

Sofahamster
Unvisited links are also styled by a{...}
Harmen
Sure, but a { ... } changes the style for all pseudo classes. Just "a {color: red}" would make visited, unvisited, hover and active links appear with red foreground color, while "a:link {color: red}" would only make unvisited links appear with red forground color.
Sofahamster
But the question is specific to the other 3 states being defined too.
Ben James
+1  A: 

The pseudo-classes :link and :visited are only for links (A elements with an href attribute):

  • The :link pseudo-class applies for links that have not yet been visited.
  • The :visited pseudo-class applies once the link has been visited by the user.

[…]

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.

But the pseudo-classes :hover, :active and :focus are not just for links but can also be applied on other elements like input or textarea.

So to be correct and only select A elements that actually are links, you would need to use a:link. And to select only links that are hovered, you would need to use a:link:hover and not just a:hover.

Gumbo
+1 for mentioning the diff v. :link and :link:hover. http://jsbin.com/iyuyo/edit
bendewey