Does "a" override "a:link" "a:active" and "a:visited" in CSS ?

Hi guys,

Is there any difference between these two codes:

a {
  color: #FF6600;
  text-decoration: none;
}

Code (markup):

a:link, a:active, a:visited {
  color: #FF6600;
  text-decoration: none;
}

Code (markup):

What I'm trying to understand is if the first code covers all the classes in that second code. So just specifying a style for the "a" tag would mean I don't have to also have tags for a:link, a:active, and a:visited.

Thanks guys!

 

Regarding your query: a will cover a:link and a:visited. Am not sure about a:active but I think it will be covered too.

 

As I understand it, a is broader (not as specific) as :link, :hover, etc.

What most people do is look at what properties they want ALL their links to have, and give that to a.
a:link is pretty much the same, but being more specific, its properties may not extend to the others.

Let's say you have some links. You want ALL of them to not be underlined (the browser default). You want untouched links to be red, hover'd ones yellow AND bold, and active ones grey AND background colour white.

So you set up the common attributes first:

a {
text-decoration: none;
font: normal 1em/1.2em Verdana, Arial, sans-serif;
text-align: center;
color: #fbd302; (some sort of orange I think... I forget)
}
This sets your font and lack of underline, as well as placement and a default colour when none is specified.

a:link {
color: #f00; (red)
}
a:link is untouched links. You could also have set this in the a section as well... I don't think it matters. However, you wouldn't want to set all the other properties under a:link instead... I'm not sure but I dunno if the other pseudoclasses would inherit from a:link, just a.

a:hover {
font-weight: bold; (the default we set was normal)
color: #ff0; (yellow)
}

a:active {
color: #c7c7c7; (grey)
background-color: #fff; (white)
}

I should test this first, but I believe that since I set the a colour to orange, the :visited may be orange since I didn't specify the :visited's colour, yet did specify the untouched :link colour. But, this only holds when I bother to mention :visited in the CSS in the first place. Notice I didn't mention :focus, so there is no orangey colour for :focus. If I mentioned :focus though without specifying a colour, then it would be orange.

Eh, take my code and test it. You'll see who really has precedence. Also, all things being equal, the last thing mentioned will also have precedence. So, the a:active part will be seen even while the mouse is also hovering... if a:hover had been listed after :active, then :hover would "cover" :active because it's last in the CSS. If :visited comes after everything, :hover and :active shouldn't work (because even while hovering, the link is still "visited").

*Edit, tested. http://stommepoes.jobva.nl/Tests/atest.html

So yes, to answer your question, you can set all properties under a alone... and if you make any mention of the pseudoclasses, they will inherit from a whatever you don't specify.
http://stommepoes.jobva.nl/Tests/atest2.html

 

Hey Stomme_poes thanks for that detailed reply and for going the extra mile and putting up those test pages.

That's exactly what I needed to know.

I am "cleaning up" my CSS and removing all unnecessary coding so assigning properties to "a" instead of "a:link, a:active, and a:visited" will be my first step. Just wanted to be sure I wasn't going to screw anything up.

Thanks for helping me out

 

A covers a:link, a:hover, a:active, a:visited, a:focus and all other pseudo-classes of a.

 

They're not psuedo-classes. They're psuedo-selectors. And "a" will only over-ride a:link (and so on) if it comes after the psuedo-selectors or if it's been given an !important over-ride.

 

Though it will INHERIT - which is what I think was being asked here.

 

They are selectors, but they're called pseudo-classes and they inherit.

If W3C says it, they'll be right. No? http://www.w3.org/TR/CSS21/selector.html#pseudo-elements