Hello,
I’ve read a couple of articles that don’t agree with each other about css and <a>. Some say you shouldn’t use such thing as:
a {
...definitions
}
and argue that you shoudl do something like:
a:link {
…definitions
}
Other articles say it’s cool. Looking at css gurus stylesheets, I realized that both approcahes were used.
Is there a better way?
Regards,
-jj. 
In my personal experiences i always use the pseudo selectors with anchor elements as the a selector by itself to me isn’t as informative as it should be in my opinion. At the end of the day every coder has their own style of how they like to do things and for me i never use the a selector by itself.
For me CSS as applied to markup is broken into two things… Everything that’s the same, and everything that is different.
Stating JUST “a” alone is as bad as stating a:pseudo for each and every state… one hits all anchors, the other only hits specific states, when in most cases you want BOTH behaviors.
“a” alone is great for hitting all the LIKE values for all the states so you don’t restate them over and over again for no reason. Font-size, font-family, text-decoration, paddings… Hit those with “a” alone.
The pseudo-states should then be used for when things are DIFFERENT – a different color to indicate it’s visited, different background for active, focus and hover… etc, etc…
Really I see no reason for a:link to ever be used – Hit A so you can nab all the states, then use the other psuedo’s to say the values that are DIFFERENT.
Anything more than that is probably just bloated code. I mean I’ve lost count of how many times I’ve seen bloated rubbish like:
a:link {
display:inline-block;
padding:8px 16px;
text-decoration:none;
font-weight:bold;
font-family:arial,helvetica,sans-serif;
font-size:14px;
line-height:16px;
color:#000;
}
a:visited {
display:inline-block;
padding:8px 16px;
text-decoration:none;
font-weight:bold;
font-family:arial,helvetica,sans-serif;
font-size:14px;
line-height:16px;
color:#800;
}
a:active {
display:inline-block;
padding:8px 16px;
text-decoration:none;
font-weight:bold;
font-family:arial,helvetica,sans-serif;
font-size:14px;
line-height:16px;
color:#F00;
}
a:focus {
display:inline-block;
padding:8px 16px;
text-decoration:none;
font-weight:bold;
font-family:arial,helvetica,sans-serif;
font-size:14px;
line-height:16px;
color:#F00;
}
a:hover {
display:inline-block;
padding:8px 16px;
text-decoration:none;
font-weight:bold;
font-family:arial,helvetica,sans-serif;
font-size:14px;
line-height:16px;
color:#F00;
}
Doing the job of:
a {
display:inline-block;
padding:8px 16px;
text-decoration:none;
font:bold 14px/16px arial,helvetica,sans-serif;
color:#000;
}
a:visited {
color:#800;
}
a:active,
a:focus,
a:hover {
color:#F00;
}
As you probably already know, using only a {…} will style all links the same and by using the pseudo-classes you can style the different states differently. i.e.
a:link {color:#FF0000;} /* unvisited link */
a:visited {color:#00FF00;} /* visited link */
a:hover {color:#FF00FF;} /* mouse over link */
a:active {color:#0000FF;} /* selected link */
Also, if I’m not mistaken, I believe a:link won’t style destination anchors, i.e. <a name=“foobar”> (someone please correct me if I’m wrong about this )
Basically, if you want all your links styled the same, whether they’re visited or hovered etc., you can just use a {…}, otherwise you use the pseudo-classes.
Hope that helped
You are correct
That’s the problem with using a{} is that it also hits named anchors but of course these days you don’t really need named anchors as ids will suffice as targets without the need for the extra elements. It’s also only really a problem if you have set all anchors to display:block or added borders anyway as otherwise nothing will really show.
There is a bug in IE6 also in that pseudo classes get more weight an in the following example you will find that .test1 gets a hover style in IE6 only when it shouldn’t.
a {
color:yellow;
background:red
}
a:hover {
background:blue
}
a.test1 {
color:black;
background:white
}
<p><a href="http://www.google.com">Test link</a></p>
<p><a class="test1" href="http://www.google.com">Test link 1</a></p>
However as long as you remember to redefine hover and visited states then using a{} should be ok and more concise (assuming named anchors aren’t an issue).
a.test {
background:yellow;
color:red;
width:100px;
height:100px;
margin:0 0 10px;
display:block;
}
a.test:visited{color:#000}
a.test:hover,
a.test:active,
a.test:focus{background:blue}
Link specificity is explained here.
I am with Shadow on this one.
notice that you could use a:link{} to have other states of a NOT inherit some property. a:link{display:block;} Does’t make a:hover display as a block.
But without going into too convoluted an example, you can use :link to add a margin of specificity over simple a{}.
It may so happen,where you have written a rule of the same specificity as another. Only a poor example comes to mind, but hopefully it will sever to illustrate what I mean ( yes, it’s bad practice to have links in different colors on different elements, but it’s just an example), lets say :
.story a {color: orange}
.content a {color: pink}
p a {color: green}
<div class="content">
<div class="story">
<p><a href="#">some junk</></p>
</div>
</div>
you may have intended the links in .story class element to be orange, but they will be pink. This is a specificity conflict. The easy way to fix this, actually is to change the order of your CSS ( put the .story rule after .content rule, in this case it even makes sense). But what if that is not an option?
.story a:link {color: orange}
.content a {color: pink}
p a {color: green}
Or let say, in that situation, you wanted links in paragraphs in a standard color, whether they were loose in .content or .story…
.story a {color: orange}
.content a {color: pink}
p a:link{color: green}
this is not to be confused with the bug in IE that Paul mentioned. I was simply bringing up the point that a:link weighs more than a, and that can be useful if used right.