CODEWITHSUNDEEP
htmlcss
usr
usr

Reputation: 171246

Why do we need "a:link"? Why not just "a"?

It seems the following variants produce identical results:

/* 1 */
a, a:visited, a:active { color: black; }
a:hover { color: red; }

/* 2 */
a, a:link, a:visited, a:active { color: black; }
a:hover { color: red; }

/* 3 */
a:link, a:visited, a:active { color: black; }
a:hover { color: red; }

Most guidance on the web uses 2 or 3. Why not go for the simplest variant which is 1? I cannot find a good reason to ever apply :link if all you need is one style for normal links and one for hover.

Is it best-practice to not use :link? Why or why not?

I don't care whether the link is visited or not. Both receive the same style. I only care about hover or not hover. This question is not about what the variants do - all do the same thing. It is about what the best variant is. Is one of the variants faulty? Which one is best-practice?

Upvotes: 25

Views: 1400

Answers (5)

Derick
Derick

Reputation: 161

It solely depends on your intention, so for your example, I would simply style all anchor elements one color and only change the style when the element is hovered.

a {color: #000;}
a:hover {color: #f00;}

In your case, you are only changing the color of the link when it's hovered. You need to add the hover pseudo element after the base rule otherwise it would be overridden due to the cascading of the style sheet.

If you were to use all of the psuedo elements in this case and you wanted the only difference to be the hover it would look like this:

a:link, a:visited, a:focus, a:active {color: #000;}
a:hover {color: #f00;}

The pseudo-class names are self explanatory:

  • :link - any unvisited link
  • :visited - any visited link
  • :active - when the link is active, e.g. when it's clicked or activated with a keyboard event
  • :focus - when the link gains focus, e.g. when a user tabs through the elements and it is the selected element
  • :hover - when it's hovered or moused over

The benefit of using a pseudo-class is that it will have a higher specificity than just targeting the anchor element. However, in your case it may not be needed.

Upvotes: 1

Everett Green
Everett Green

Reputation: 632

It is used to differentiate between simple anchors and anchors with href attributes. See demo jsfiddle here.

<style>
a { color: red; }
a:link { color: blue; }
</style>
<a name="anchor">No href</a><br />
<a href="http://stackoverflow.com/">With href</a>

EDIT: For this reason, it is important to cover all cases in your CSS. Option 2 is the only option that completely covers all cases. If you do not have anchor elements without href attributes, you are safe with option 1.

Upvotes: 21

RbG
RbG

Reputation: 3213

a:link is specifically for links that have not been visited. a applies to all <a> elements.as you said

I don't care whether the link is visited or not

then you may avoid the use of a:link ...use of only a...a:hover...a:active will satisfy your need

and also a:link wont work if there is no href in your anchor but a will do

Upvotes: 2

hobbs
hobbs

Reputation: 240799

Because not every a is a link.

<a name="table_of_contents">Table of Contents</a>

isn't a link, it's an anchor that can be linked to with <a href="#table_of_contents">.

a will match it, a:link won't.

Upvotes: 69

VexNet
VexNet

Reputation: 23

I suppose you can use 

<a>

to create a button so that could produce alternate results... I always use a:link

Upvotes: 1

Related Questions