By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
424,961 Members | 1,332 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 424,961 IT Pros & Developers. It's quick & easy.

priority of descendent selectors

P: n/a
hi,

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.

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

TIA

Andy
Jul 20 '05 #1
Share this Question
Share on Google+
4 Replies


P: n/a
Andy Fish wrote:
hi,

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.

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


Hi,

Try this one:

<HTML><HEAD>
<style type="text/css">
..foo { background:red; }
..bar { background:blue; }
</style>
</HEAD><body>
<table class="bar"><tr><td>
<table class="foo"><tr><td>hello</td></tr></table>
</td></tr></table>
</body></HTML>
Tonnie

--
Glas geschiedenis: www.vision2form.nl/glashistorie.html
Passie en talent : www.vision2form.nl/young_talent.html
Webontwerp : www.vision2form.nl/webontwerp/index.html
SEO doe het zo : http://www.vision2form.nl/webontwerp...en_worden.html
Jul 20 '05 #2

P: n/a
On 21 Sep 2004 09:52:17 -0700, Andy Fish <aj****@blueyonder.co.uk> wrote:
hi,

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.
That's correct. As the "hello"'s is in a td within a table classed "foo",
and is in a td within a table classed "bar", the later rule overrules.
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


Specify the rules in the opposite order. Set the rules for the outer
table, then after that the rules for what is next inside, etc.
Jul 20 '05 #3

P: n/a
On 21 Sep 2004 09:52:17 -0700, aj****@blueyonder.co.uk (Andy Fish)
wrote:
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.
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.
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


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

Jul 20 '05 #4

P: n/a

"Steve Pugh" <st***@pugh.net> wrote in message
news:g3********************************@4ax.com...
On 21 Sep 2004 09:52:17 -0700, aj****@blueyonder.co.uk (Andy Fish)
wrote:
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.


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


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


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
Jul 20 '05 #5

This discussion thread is closed

Replies have been disabled for this discussion.