a vs a:link

[OctoberWind]

is there a difference (significant or otherwise) between using a {...} and a:link {...}?

I've got 2 different pages at work, put together by the same "design team". One lists the css as [a, a:visited, a:hover, a:active], while the other uses [a:link, a:visited, a:hover, a:active].

My first guess is that "a:link: applies only to what would be a 'true' hyperlink, where as "a" would apply itself to any anchor tag (href, name, ect.).

[TJ111]

In my experience, there has never been a difference whether I use the :link pseudo-class or not. I normally don't add the :link because I'm lazy, but thinking of it like that makes it easy for me to remember the order the classes must be in.
LoVe HAte
1. Link
2. Visited
3. Hover
4. Active

[WebJoel]

I have started using "a:focus" in my link stylings, to assist non-mouse 'clicks', like for 'hotkeys' and other non-pointer tool actions.

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

and if you're a STAR WARS fan, remember:
Lord Vader's Handle Formerly Anakin.

Anagrams.

[Centauri]

Listing all the psuedo classes in a statement such as a, a:visited, a:hover, a:active { } is pointless as the first a includes all psuedo state classes. Using a { } will cover all states, meaning only any changes required to the psuedo classes needs to be defined.

[WebJoel]

I had to re-read your post a few times before, yes!! -that was why! The 'pseudo classes' are for when an anchor changes due to some action, focus or event (like a pointer-tool hovering over it, a 'hot-key' moving over it, or a left-or-right mouse button pressed-down on it, etc... Some 'event' needs to occur).

A 'regular' anchor would not do this. Or you may require some 'regular anchors' to not behave dynmically, so we use a {...} for them..

[OctoberWind]

Thanks for the clarification between a {...} and a:link {...}.

to clarify: each of the pseudo-classes have varied definitions;

a {color: #fff;}
a:visited {color: #000;}
a:hover {color: #ccc;}
a:active {color: #999;}

and are not listed in one string,

a:visited, a:hover, a:active {text-decoration: none;}

[WebJoel]

Thanks for the clarification between a {...} and a:link {...}.

to clarify: each of the pseudo-classes have varied definitions;

a {color: #fff;}
a:visited {color: #000;}
a:hover {color: #ccc;}
a:active {color: #999;}

and are not listed in one string,

a:visited, a:hover, a:active {text-decoration: none;}

If "a:visited, a:hover, a:active" all share the same Delcaration of " {text-decoration: none;}" then yes, this is correct. It is actually good shorthand', otherwise you'd be writing it like:

a:visited {text-decoration: none;}
a:hover {text-decoration: none;}
a:active {text-decoration: none;}

The shorthand method removes two instances of "{text-decoration: none;}" and you have saved your several bytes right there.
Applied consisitanty & correctly, this can reduce your CSS remarkably.

It's perfectly okay to list a Selector several times, if necessary...

example:

h1, h2, h3, h4, h5, h6 {color:#000; background-color:#fff; font-family:arial, verdana, serif; font-weight:normal}
h1 {font-size:2.1em;}
h2 {font-size:1.9em;}
h3 {font-size:1.8em;}
h4 {font-size:1.6em;}
h5 {font-size:1.4em;}
h6 {font-size:1.2em;}

which is clearly smaller than:

h1 {font-size:2.1em; color:#000; background-color:#fff; font-family:arial, verdana, serif; font-weight:normal}
h2 {font-size:1.9em; color:#000; background-color:#fff; font-family:arial, verdana, serif; font-weight:normal}
h3 {font-size:1.8em; color:#000; background-color:#fff; font-family:arial, verdana, serif; font-weight:normal}
h4 {font-size:1.6em; color:#000; background-color:#fff; font-family:arial, verdana, serif; font-weight:normal}
h5 {font-size:1.4em; color:#000; background-color:#fff; font-family:arial, verdana, serif; font-weight:normal}
h6 {font-size:1.2em; color:#000; background-color:#fff; font-family:arial, verdana, serif; font-weight:normal}