homepage Welcome to WebmasterWorld Guest from 54.205.242.179
register, free tools, login, search, subscribe, help, library, announcements, recent posts, open posts,
Subscribe to WebmasterWorld
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: DrDoc

CSS Forum

    
inheritance question I think
blueman2




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

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




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

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

swa66




msg:4054553
 4:21 pm on Jan 5, 2010 (gmt 0)

<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.

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About
© Webmaster World 1996-2014 all rights reserved