PDA

View Full Version : What is the right contextual selector?



cma6
Mar 30th, 2007, 02:17 AM
I have a large table with the id of "itemtable" like this:
<table cellpadding="0" cellspacing="0" id="itemtable" summary="Main content">

The cells have a class of "details" like this:
<td class="details">
<p><b>#2135&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; $1,100</b></p>
<p>Silk lace/satin dress, c.1920. This superb dress captures the <span class="bi">unstructured
elegance of the early 1920s</span>. The earthy tones of cocoa and deep olive in the lace are perfectly
complemented by the gold slip, which gives the dress a lovely mellow glow. A lookalike to the
&quot;<a class=bd href="new_page_255.htm#hope">Hope dress</a>.&quot;&nbsp; NEW LISTING&lt;/p>&lt;/td>&lt;/tr>
&lt;tr class="row1">&lt;td>&lt;a href="new_page_175.htm">&lt;img src="images/Thumbnails/9364thumb2c.jpg" alt="1920s lace bolero" width="209" height="325">&lt;/a>&lt;/td>


I want to be able to style an anchor link like the one for "Hope dress". The anchor is within a table with the id "itemtable" and within a cell with the class "details". I gave the anchor an additional class of "bd" but that doesn't do it.

The style sheet does have selectors for anchor links outside the table like this:
a:link{color:#000;background-color:#fff;text-decoration:none;}
a:visited{color:#8B0000;background-color:#fff;text-decoration:none;}
a:link:hover,a:link:active{color:red;background-color:#fff;text-decoration:none;}

But these are irrelevant to my purpose. For the anchor links within the table cells, I want the same styles as above with the exception of a:link{color:blue;

You can see the page live here as the 4th one down (#2135) on this page:
http://www.vintagetextile.com/1920s.htm

As you can see, the Hope link has color:#8B0000; so it may be picking it up from the anchor styles outside the table, but that's just a guess.

Thanks in advance for your help, CMA

koyama
Mar 30th, 2007, 03:40 AM
For the anchor links within the table cells, I want the same styles as above with the exception of a:link{color:blue;

The 'Hope' link is blue when I look at it. From your current style sheet:


a:link{color:#000;background-color:#fff;text-decoration:none;}
a:visited{color:#8B0000;background-color:#fff;text-decoration:none;}
a:link:hover,a:link:active{color:red;background-color:#fff;text-decoration:none;}
a.bd:link{color:#00f;background-color:#fff;text-decoration:none;}

Everything appears fine so I guess you have resolved the problem.

cma6
Mar 30th, 2007, 03:59 AM
You are right that this link must be working since the unclicked link is blue:
a.bd:link{color:#00f;background-color:#fff;text-decoration:none;}

But when I added the appropriate rules for
a.bd:hover and a.bd:active to make them red,
those rules were ignored.

That's the problem.

koyama
Mar 30th, 2007, 12:34 PM
But when I added the appropriate rules for
a.bd:hover and a.bd:active to make them red,
those rules were ignored.
You mean you tried to add something like this?


a.bd:link{color:#00f;background-color:#fff;text-decoration:none;}
a.bd:visited{color:#00f;background-color:#fff;text-decoration:none;}
a.bd:hover{color:#00f;background-color:#fff;text-decoration:none;}
a.bd:active{color:#00f;background-color:#fff;text-decoration:none;}

I don't see why it shouldn't be working. Try to update your current style sheet and post a new link.