CSS styling links: why a:link, a:visited vs just a

Question

i wonder why i can't use, or should not use

a { ... }

vs

a:link, a:visited { ... }

Answer 1

It's just a matter of it you want to have different styling for a visited link vs normal links or not (for example dim out the link, I was already there).

Just a is valid, but do you want to give :visited or :hover links special styling for example?

Answer 2

:visited means you are trying to give a link a styling that has been visited by the user before and :hover means you are trying to give a link a style when a user mouse overs that link. You may or may not use it. This is your choice.

Answer 3

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.

Answer 4

If you only style a {...} then the style will also be applied to <a name="..."></a> tags, which are not really hyperlinks.

a:link {...} specifically relates to hyperlinks. :visited, :hover and :active are different states of these links. Note that :hover and :active can apply to other tags as well.

Answer 5

While the first a refers to all links, :link and :visited refers to specific states of those links.

The first one refer to non-visited links, and the latter to visited one. see http://www.w3.org/TR/CSS2/selector.html#link-pseudo-classes for more infos.

Answer 6

You may provide the general style for your links with the a only. More specific styles can than be applied to the pseudo-classes. For example:

a {
    text-decoration: none;
    font-weight: bold;
}

a:link {
    color: #00F;
}

a:hover {
    color: #F00;
}

a:visited {
    color: #888;
}

a:active {
    color: #0F0;
}

In this example, all links are styled bold and are not underlined. But the color changes for each type of link...