In CSS, want to override my a:link and a:hover directives to for a specific span

Posted by brendan on Stack Overflow See other posts from Stack Overflow or by brendan
Published on 2010-05-20T02:45:52Z Indexed on 2010/05/20 2:50 UTC
Read the original article Hit count: 269

Filed under:

This will probably be a softball for you CSS folks...

I have a site like this:

<div id="header">
<span class="myheader">This is the name of my awesome site!!!!</span>
</div> 
<div id="content">whole bunch of other stuff</div>
<div="sidemenu"><ul><li>something</li><li>something else</li></ul>
<div id="footer">Some footer stuff will go here....</div>

In my css I have some directives to format the hyperlinks:

a:link { text-decoration: none; color : #ff6600; border: 0px; -moz-outline-style: none;}
a:active { text-decoration: underline; color : #ff6600; border: 0px; -moz-outline-style: none;}
a:visited { text-decoration: none; color : #ff6600; border: 0px; -moz-outline-style: none;}
a:hover { text-decoration: underline; color : #000; border: 0px; -moz-outline-style: none;} 
a:focus { outline: none;-moz-outline-style: none;}

Now here is the problem. In my header I have some text that is a link, but I do not want to to format it like all the other links in the site. So basically I want my a:link, a:hover, etc to ignore anything in the "header" div. How can I do this? Assume I need to override this for that div/span?

© Stack Overflow or respective owner

Related posts about css