Link CSS Properties in Different Based On <div> 1

[Michael42]

Hello,

Using CSS2 I have some basic psuedo <a> link properties:
a:active {color: #038C96; text-decoration: none;}
a:hover {color: red; text-decoration: none;}
a:link {color: #038C96; text-decoration: none;}
a:visited: {color: #038C96; text-decoration: none;}

My problem is I need the <a> properties to be different in my <div> for my system navigation bar. I would like to do this in my .css file (i.e. no in-line page CSS).

What can you recommend?

Thanks,

Michael42

 

[cLFlaVA]

Like this:

div a:active {color: #038C96; text-decoration: none;}
div a:hover {color: red; text-decoration: none;}
div a:link {color: #038C96; text-decoration: none;}
div a:visited: {color: #038C96; text-decoration: none;}


*cLFlaVA
----------------------------
Breaking the habit...

 

[cLFlaVA]

Sorry, I might have misread...

If you have one div for your navigation bar, give it an id.

[tt]<div id="nav">Here is the navigation</div>[/tt]

Then do this:

#nav a:active {color: #038C96; text-decoration: none;}
#nav a:hover {color: red; text-decoration: none;}
#nav a:link {color: #038C96; text-decoration: none;}
#nav a:visited: {color: #038C96; text-decoration: none;}


*cLFlaVA
----------------------------
Breaking the habit...

 

[Michael42]

cLFlaVA,

Wow! CSS is more powerful than I thought!

Thanks for taking the time to post - your suggestion was perfect.

-Michael42

 

[Vragabond]

Just a short addendum to the solution. W3 states that pseudo classes should follow a correct order for them to work as expected on all browsers. This order is :link, :visited, :focus, :hover, :active. Your correct code should then be:

#nav a:link { color: #038C96; text-decoration: none; }
#nav a:visited { color: #038C96; }
#nav a:hover { color: red; }
#nav a:active { color: #038C96; }

 

[Michael42]

Vragabond,

It is good to know the rules of engagement.

Thanks for taking the time to post this.

-Michael42