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)

New User

5+ Year Member

joined:Oct 23, 2008
posts: 20
votes: 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 -->

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

Junior Member

5+ Year Member

joined:Nov 17, 2009
votes: 0

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)

Senior Member

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

joined:Aug 7, 2003
votes: 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.


Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

Featured Threads

Free SEO Tools

Hire Expert Members