Welcome to WebmasterWorld Guest from

Forum Moderators: not2easy

Message Too Old, No Replies

inheritance question I think

10:14 pm on Jan 4, 2010 (gmt 0)

5+ Year Member

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">
<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>
<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>
<a href="hardshell_cases2.html" class="center_link">MORE</a> </div>
<!-- InstanceEndEditable --> </div><!-- end #content div -->

4:13 pm on Jan 5, 2010 (gmt 0)

5+ Year Member

instead of defining the pseudo class :link just define it for 'a'. I have had that work before.
4:21 pm on Jan 5, 2010 (gmt 0)

WebmasterWorld Senior Member swa66 is a WebmasterWorld Top Contributor of All Time 10+ Year Member

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

is selected with

not with .center_link a or even more complex variants.

Next comes specificity

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

#content a.center_link has a specificity of and if it came later in the order it could win over #content a:link
#content a.center_link:link has a specificity of 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.


Featured Threads

Hot Threads This Week

Hot Threads This Month