inheritance question I think

[blueman2]

I am trying to apply a class to a link that is picking up style from the div that it is in. Here is the css for that existing style from the div:

}
#content {
float: left;
padding: 5px;
width: 680px;
min-height: 550px;
height: auto;
}
#content a:link {
color: #000000;
}
#content a:visited {
color: #000000;
}
#content a:hover {
color: #DA830C;
text-decoration: none;
}

I created the following class:

}
.center_link {
color: #CC3366;
}
.center_link a:link {color: #CC3366;}
.center_link a:visited {color: #CC3366;}
.center_link a:hover {color: #CC3366;
} 

in order to change the color. I thought that by applying a class to this link it would override whatever styling the Div #content puts on it but I can't get it to change no matter what I try. Some help would be appreciated. Here's the relevant HTML:

 <div id="content"><!-- InstanceBeginEditable name="content" -->
  <div id="affiliate-div">
   <!-- start new product -->
  <form method="get" action="http://www.dpbolvw.net/interactive" target="_blank">
   <table border="0" width="665" cellpadding="5" cellspacing="4">
   <tr>
    <td valign="top" width="17%"><img src="http://img3.musiciansfriend.com/dbase/pics/products/tn/4/3/4/375434.jpg" border="0" alt="Musician's Friend Vintage Electric Guitar Case"/></td>
    <td valign="top" ><p><b><font size="4">Musician's Friend Vintage Electric Guitar Case</font></b></p>
    <p><font size="2">If you love the look of a classic wooden case, the Musician&#39;s Friend Vintage Electric Guitar Case is the one for you! It&#39;s constructed of 5-ply, cross-grain Luan plywood and features a distressed, leather-like finish. The case is extremely durable and road-ready. Plush interior lining, internal storage pocket and lockable. All hardware is triple chrome-plated. The case&#39;s carrying handle is ergonomically designed and padded for added comfort. Body area: 18-3/4&quot;L x 12-3/4&quot;W. Total length: 42&quot;.</font></p>
    <hr>
    <input type="hidden" name="pid" value="2849393"/>
    <input type="hidden" name="aid" value="10381297"/>
    <input type="hidden" name="cjsku" value="544769"/>
    <input type="hidden" name="url" value="http://www.musiciansfriend.com/product/Musicians-Friend-Vintage-Electric-Guitar-Case?sku=544769"/>
    <input type="submit" value="See More Details"/>    </td>
   </tr>
   </table>
  </form>
   <a href="hardshell_cases2.html" class="center_link">MORE</a> </div>
 <!-- InstanceEndEditable --> </div><!-- end #content div --> 

Thanks

[chasehx]

instead of defining the pseudo class :link just define it for 'a'. I have had that work before.

[swa66]

<a href="hardshell_cases2.html" class="center_link">MORE</a> </

is selected with
.center_link
or
a.center_link

not with .center_link a or even more complex variants.

Next comes specificity

.center_link has a specificity of 0.0.1.0
a.center_link has a specificity of 0.0.1.1
#content a:link has a specificity of 0.1.1.1 and will win out over the previous ones whenever they are in conflict.

#content a.center_link has a specificity of 0.1.1.1 and if it came later in the order it could win over #content a:link
#content a.center_link:link has a specificity of 0.1.2.1 and it could win over #content a:link no matter what.

Specificity is important to understand fully before writing selectors or it'll come and haunt you.