Why bother with the "L" in the "LVHA" link styles?

Question

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?

Answer 1

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.

Answer 2

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.