styling <a> inside a class prob.

global style overriding class specific style?

[ch1mp]

hi all,

i think i'm missing something really obvious here, i have...

a:link
{
color:#b52323;
text-decoration:none;
}

a:visited
{
color:#000;
text-decoration:none;
}

a:hover
{
color:#b52323;
text-decoration:underline;
}

a:active
{
color:#b52323;
text-decoration:none;
}

in a global.css, but inside a panel where the whole div is a link i want to override this global link styling...

.panelText a:link
{
color:#000;
text-decoration:none;
}
.panelText a:visited
{
color:#000;
text-decoration:none;
}
.panelText a:hover
{
color:#000;
text-decoration:none;
}
.panelText a:active
{
color:#000;
text-decoration:none;
}

this doesn't work though, i've tried a.panelText but no dice either. it's weird because in my footer i overwrite the globals with no problem...

.footerLinks a
{
color: #FFFFFF;
text-decoration:none;
}

any ideas? thanks in advance...

[rocknbil]

The last one may be "slippery" and give you something other than #fff for the four states. Try

.footerLinks a:link,
.footerLinks a:visited,
.footerLinks a:hover,
.footerLinks a:active
{
color: #FFFFFF;
text-decoration:none;
}

But of course, don't make them all the same. :-)

this doesn't work though . . .
.panelText a:link
{
color:#000;
text-decoration:none;
}

What's the HTML like?

if it's

<p class="panelText"><a href="#">some link</a></p>

It should work. But if you have

<p><a class="panelText" href="#">some link</a></p>

what you want is

.panelText:link
{
color:#000;
text-decoration:none;
}

The last possibility, if you have a set of nested elements,

<div class="panelText">
<ul><li><a href="#">some link</a></li></ul>
</div>

Some other selector on one of the elements may be conflicting/overriding it.