Efficient Code

[robindean]

Is this the most efficient way to code my links?

a:link, a:hover, a:active, a:visited {outline: none; text-decoration: underline; color: #ffffff; cursor: pointer;}
a.black:link, a.black:hover, a.black:active, a.black:visited {color: #000000;}
a.blue:link, a.blue:hover, a.blue:active, a.blue:visited {color: #0099ff;}
a.green:link, a.green:hover, a.green:active, a.green:visited {color: #00bb00;}
a.purple:link, a.purple:hover, a.purple:active, a.purple:visited {color: #880088;}

what I mean is, could I say something like "a.purple:[link, hover, active, visited] {somecolor}

or is it best as-is?

[doodler]

hi,
i cant think of a shorter way of putting it which is hardly helpful so sorry.
There's also a:visited:hover{} if u wanna stick that in there ;)

[robindean]

Thanks doodler!

I'm assuming that by designated a:hover ... that it also applies to a:visited:hover, doesnt' it?

[doodler]

IE doesnt like it so i think its just a firefox thing, im only saying that cos im using firefox and gave up using IE long time ago. I still use IE6sp2 for testin only, so it might have been fixed in ie7.

[WebJoel]

You could get the order correct: it is "LVHA", -"link, visited, hover, anchor" in this order. Having these in the incorrect order will make a previously- "visited" link not respond to "hover" until you refresh/reload the page, etc.
Just remember the phonetic acronym "LoveHate"

[Centauri]

instead of a:link, a:hover, a:active, a:visited {outline: none; text-decoration: underline; color: #ffffff; cursor: pointer;} you can use a {outline: none; text-decoration: underline; color: #ffffff; cursor: pointer;} which covers all psuedo states as well. Then you can assign any differences to individual psuedo class in the order that WebJoel mentioned (although "A" stands for "active")

[robindean]

Thanks!

Don't you mean "Link, Visited, Hover, ACTIVE" ?

[ray326]

I think you ought to factor your colors out into their own classes.

.black {color: #000}
.blue {color: #09f}
.green {color: #0b0}
.purple {color: #808}
.white {color: #fff}

Then you can apply them as needed without tying them specifically to anchors and having to replicate a bunch more CSS code for using them elsewhere.

[felgall]

Thanks!

Don't you mean "Link, Visited, Hover, ACTIVE" ?

The complete list is:

Link, Visited, FOCUS, Hover, Active

[WebJoel]

Thanks!

Don't you mean "Link, Visited, Hover, ACTIVE" ?

a {}
a:link {}
a:visited {}
a:hover {}
a:active {}

"a" is for any/all anchors that have no 'pseudo-class'. "a:link" is for targeting the psuedo-class indicatiing 'at rest' (not visited, not hovered-over, not on-click, just 'ready').
In the acronym "LoveHate", "a" stands for a:active, not "a" (the standard html "anchor").

-I almost never use "a:focus", although I probably should. :) It's like the forgotten pseudo-class... :cool: