"Steve Pugh" <steve@pugh.net> wrote in message
news:g3o0l0lke7eunvcci5i6spkm7mt4uic0kd@4ax.com...[color=blue]
> On 21 Sep 2004 09:52:17 -0700,
ajfish@blueyonder.co.uk (Andy Fish)
> wrote:
>[color=green]
>>I am using descendent selectors to format cells within a table
>>according to the css class of the table. However, when using nested
>>tables, it seems to pick up the outer matching rule rather than the
>>inner one. here's a self-contained example:
>>
>><HTML><HEAD>
>><style type="text/css">
>>table.foo td { background-color:red; }
>>table.bar td { background-color:blue; }
>></style>
>></HEAD><body>
>><table class="bar"><tr><td>
>> <table class="foo"><tr><td>hello</td></tr></table>
>></td></tr></table>
>></body></HTML>
>>
>>The cell containing 'hello' matches both the style rules. Common sense
>>tells me that 'table.foo' should take precedence because it is the
>>closest ancestor to the cell in question. however, all the browsers I
>>tried display the cell in blue i.e. they apply the outer style rule.[/color]
>
> Common sense is rarely a good guide when it comes to anything
> connected with the WWW. ;-)
>
> Both rules have equal specificty, thus the last one specified in the
> stylesheet takes precedence. So the browsers are correct to make the
> cells blue.
>[color=green]
>>can anyone tell me how I can achieve my desired result i.e. to have an
>>inner table with a different style to the outer table, but without
>>having to specify the class of each individual cell[/color]
>
> If foo is always the inner table (i.e. you never have any cases where
> bar is inside foo) then simply swapping the order of the style rules
> will do the trick.
>
> If foo and bar can contain each other in either combination then a
> more complex set of selectors is needed. One possible option would be:
> table.foo td, table.bar table.foo td { background-color:red; }
> table.bar td, table.foo table.bar td { background-color:blue; }
>
> In this case the inner cells from your HTML example match both
> seletors of the first rule and the first selector of the second rule.
> Of those three selectors the second selector of the first rule
> (table.bar table.foo td) is more specific than the other two and thus
> takes precedence.
>
> In theory you could replace descendent selectors with child selectors
> table.foo>tr>td { background-color:red; }
> table.bar>tr>td { background-color:blue; }
> but as IE doesn't support child selectors that's not going to be
> practical on the www.
>
> But why are you using nested tables? Surely you're not using tables
> for layout? Shocking. ;-)
>
> Steve
>[/color]
Thanks for the replies. In all my experimentation trying to get this to
work, the one thing that didn't occur to me was the order the styles are
specified
Andy
priority of descendent selectors 
