Forums

Oskar

Hi guys,

I've never really understood the magic of links and css, sometimes it just works using a:link instead of just a. How does it actually work?

Does the a element target both a:link, a:visited, a:active and a:hover? No..

When having to style nested menus it can get a bit messy with all the css selectors you need on a three-level-menu :)

Jonz

I think its just being specific. They both do the same.

When you use a: hover - you're being specific to the anchor hover state
like wise a:visited and a:active

I would guess the actual proper way to write it (if you try to think like the W3C) would be:


a:link {
	color: #666;
}
a:visited {
	color: #030;
}
a:hover {
	color: #333;
}
a:active {
	color: #0C3;
}

Jonz

I have to start declaring link for the anchor styles. It is indeed the correct way to do it.

Oskar

Alright, thank you for clearing it up for me, Jonz.

chriscoyier

I *think* the a:link will only affect anchor links that actually have an href attribute, which isn't required. so

a:link {
color: red;
}

would affect:

<a href="#">something</a>

but not:

<a>something</a>

I could be wrong though? Someone should do a quick test =)

MikeC

I don't think that's correct Chris.

<html>
<head>
<title>Untitled Document</title>
<style type=\"text/css\">
a { color: yellow; }
a:link { color: red; }
</style>
</head>
<body>
<p><a href=\"#\">Link Text</a></p>
<p><a>Anchor Text</a></p>
</body>
</html>

The outcome was:

Link Text

Anchor Text

iopet

http://img175.imageshack.us/img175/3417/60204461nx0.jpg

MikeC

Oh yeah...

I must have not saved on the refresh or something :?

Sorry about that.

Oskar

Thanks all. I just discovered these posts by Eric Meyer. It's definitely worth a read.
Link Specificity, Ordering the Link States and Who Ordered the Link States?

treehouse : what would you like to learn today?

Forums

Difference between 'a:link' and just 'a'