/    Sign up×
Community /Pin to ProfileBookmark

Efficient Code

Copy linkTweet thisAlerts:
Aug 19.2007

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?

to post a comment
CSS

9 Comments(s) ↴

Copy linkTweet thisAlerts:
@doodlerAug 19.2007 — 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 ?
Copy linkTweet thisAlerts:
@robindeanauthorAug 19.2007 — Thanks doodler!

I'm assuming that by designated a:hover ... that it also applies to a:visited:hover, doesnt' it?
Copy linkTweet thisAlerts:
@doodlerAug 19.2007 — 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.
Copy linkTweet thisAlerts:
@WebJoelAug 19.2007 — 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 "[B]L[/B]o[B]v[/B]e[B]Ha[/B]te"
Copy linkTweet thisAlerts:
@CentauriAug 19.2007 — instead of [CODE]a:link, a:hover, a:active, a:visited {outline: none; text-decoration: underline; color: #ffffff; cursor: pointer;}[/CODE] you can use [CODE]a {outline: none; text-decoration: underline; color: #ffffff; cursor: pointer;}[/CODE] 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")
Copy linkTweet thisAlerts:
@robindeanauthorAug 19.2007 — Thanks!

Don't you mean "Link, Visited, Hover, ACTIVE" ?
Copy linkTweet thisAlerts:
@ray326Aug 20.2007 — I think you ought to factor your colors out into their own classes.
<i>
</i>.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.
Copy linkTweet thisAlerts:
@felgallAug 20.2007 — Thanks!

Don't you mean "Link, Visited, Hover, ACTIVE" ?[/QUOTE]

The complete list is:

Link, Visited, FOCUS, Hover, Active
Copy linkTweet thisAlerts:
@WebJoelAug 20.2007 — Thanks!

Don't you mean "Link, Visited, Hover, ACTIVE" ?[/QUOTE]

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 "[B]L[/B]o[B]v[/B]e[B]Ha[/B]te", "[B]a[/B]" stands for [B]a:active[/B], not "[B]a[/B]" (the standard html "anchor").

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

Success!

Help @robindean spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.16,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...