What is the right contextual selector?

[cma6]

Styling an anchor in a table--what is the right contextual selector?

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

 

[Vragabond]

From what you told us, your best solution would be:

#itemtable a:link {
  color: #someother;
}

 

[cma6]

Hi Vragabond:
#itemtable a:link:hover{color:red;background-color:#fff;text-decoration:none;}

Your idea (modified as above) does work but unfortunately only temporarily. If I hover over the link, it is red, which means your modified solution works. But if I click on the link, and come back to the page, the link is #8B0000 as per the rule for visited links.
a.bd:visited{color:#8B0000;background-color:#fff;text-decoration:none;}

That is also correct. The problem is that if I then hover over the link, it remains the visited link color #8B0000, when it should be the hover color, red.



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;}
a.bd:visited{color:#8B0000;background-color:#fff;text-decoration:none;}
#itemtable a:link:hover{color:red;background-color:#fff;text-decoration:none;}

 

[Vragabond]

I am not aware of the following syntax [tt]a:link:hover[/tt]. Where did you learn this?

You said above that you want the links in the table to behave the same, apart from the link state, which should be different. Anyway, I suggest you do not modify the code that I give you, unless where necessary (changing to your colour). Here's a thing to note: The pseudo classes for the links should always be given in the correct order: :link, :visited, :focus, :hover, :active. You can omit as many as you want but you cannot change the order.

That said, I suggest you try:

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

#itemtable a:link, 
#itemtable a:visited, 
#itemtable a:hover,
#itemtable a:active {
  color: red; 
}

 

[cma6]

Thanks,Vragabond.
I remember the reason I inserted "link". Page 351 of the first edition of Eric Meyer's "CSS, the Definitive Guide" says that "User agents could in theory allow the assignment of hover styles to any element. If you want to make sure your hover styles are applied only to your hyperlinks, you need to use a:link:hover{...