homepage Welcome to WebmasterWorld Guest from
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Pubcon Platinum Sponsor 2014
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

inheritance question I think

5+ Year Member

Msg#: 4054022 posted 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">
<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 -->




5+ Year Member

Msg#: 4054022 posted 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.


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

Msg#: 4054022 posted 4:21 pm on Jan 5, 2010 (gmt 0)

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

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.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved