CODEWITHSUNDEEP
css
Jiew Meng
Jiew Meng

Reputation: 88197

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

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

a { ... }

vs 

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

Upvotes: 6

Views: 6233

Answers (7)

Murad Sofiyev
Murad Sofiyev

Reputation: 791

If you style a {...} it is work like a:link, a:visited {...}. Also a:link can't override a {...} style but a:visited can. If you want to add style all state of a it is better to use a {...}. Also a:link only apply a elements which have href attriubute.

Upvotes: 0

bluesmoon
bluesmoon

Reputation: 4320

If you only style a {...} then the style will be applied to all anchor elements including <a name="..."></a> elements, which define an anchor within the page, but do not reference a hyperlink.

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 elements as well.

Upvotes: 11

Fidi
Fidi

Reputation: 5834

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...

Upvotes: 4

Alexis M&#233;taireau
Alexis M&#233;taireau

Reputation: 11215

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.

Upvotes: 0

Andy
Andy

Reputation: 2774

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.

Upvotes: 0

Naveed Butt
Naveed Butt

Reputation: 2901

: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.

Upvotes: 0

Nick Craver
Nick Craver

Reputation: 630389

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?

Upvotes: 2

Related Questions