3 replies [Last post]
Newcoma
Offline
Enthusiast
Last seen: 10 years 2 weeks ago
Timezone: GMT+1
Joined: 2007-11-29
Posts: 60
Points: 5

Hello

I was wondering what is the difference between using 'a' selector and 'a:link' like

a {text-decoration:none;}

and

a:link {text-decoration:none;}

Stomme poes
Stomme poes's picture
Offline
Elder
Netherlands
Last seen: 9 years 24 weeks ago
Netherlands
Timezone: GMT+2
Joined: 2008-02-04
Posts: 1854
Points: 378

YES

Yes.

a:link affects ONLY untouched uncached links. Styles set for this do not cascade or inherit.

a affects all anchors. 99% of the time, you will write less code if you style the a, then any differences required for :hover etc.

a {
text-decoration: none;
color: #fbd302;
font: bold 1.2em georgia, serif;
}

all links will have no underline, be orange, bold, 1.2em size and serif (georgia if the machine has this font).

a:hover {
color: #0cea06;
}

Now, a:hover will still have no underline, still be bold, 1.2em size and serif/georgia. Only thing we had to mention was what we wanted different: the colour is now a green.

If you style a:link you will need to repeat yourself for every other anchor style, and any styles you don't mention (if say you didn't mention a:visited) go to the browser defaults. It will become purple and underlined even though you styled a:link, because a:visited cannot inherit from a:link.

The one time you would want to style a:link is when you're using a destination anchor:
Though I don't know why, as I never use them. They are used for skip links. But I don't know any further about those; I use something else for skip links, so maybe a crusty here knows more.

I'm no expert, but I fake one on teh Internets

manrilla
manrilla's picture
Offline
Enthusiast
Philadelphia
Last seen: 11 years 2 weeks ago
Philadelphia
Timezone: GMT-4
Joined: 2005-02-04
Posts: 56
Points: 3

I believe this will help you

This should illustrate the differences:

<span style="font-weight:bold">a:link</span> {color: #FF0000}     /* <span style="font-weight:bold">unvisited link</span> */
a:visited {color: #00FF00}  /* visited link */
a:hover {color: #FF00FF}   /* mouse over link */
a:active {color: #0000FF}   /* selected link */

Hope that helps,

"Waking a half mat. Sleeping, one mat. Rule the nation, a fistful of rice."

Marc Manley.com
http://www.marcmanley.com/

Stomme poes
Stomme poes's picture
Offline
Elder
Netherlands
Last seen: 9 years 24 weeks ago
Netherlands
Timezone: GMT+2
Joined: 2008-02-04
Posts: 1854
Points: 378

add a:focus {blah;}

add
a:focus {blah;} /*keyboard and post-mouseclick links*/

I'm no expert, but I fake one on teh Internets