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 4  4247 
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
On 21 Sep 2004 09:52:17 -0700, Andy Fish <aj****@blueyon der.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.
On 21 Sep 2004 09:52:17 -0700, aj****@blueyond er.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
"Steve Pugh" <st***@pugh.net > wrote in message
news:g3******** *************** *********@4ax.c om... On 21 Sep 2004 09:52:17 -0700, aj****@blueyond er.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 This thread has been closed and replies have been disabled. Please start a new discussion. Similar topics | |
by: Tony Benham |
last post by:
I have been getting to grips with css recently (very slowly), and one area I
have a problem is when to use class selectors or id selectors. Are there any
guidelines when to use each type ? The key difference is, AFAICS, is that id
selectors can only be used once, whereas class selectors can be used
repeatedly ? Is this the main differentiator ?
Regards
Tony B
|
by: Sue Sims |
last post by:
From <URL: http://www.w3.org/TR/CSS21/selector.html#id-selectors >
I find the following text:
"What makes attributes of type ID special is that no two such attributes
can have the same value;..."
In the second example, I find the rule:
*#z98y { letter-spacing: 0.3em }
|
by: Marco Rego |
last post by:
How do I know if a class is descendent of another one,
not necessaraly his direct parent ?
In my case, I need to know if a certain class descends
from Control.
Thanks for any help.
_____
Marco
|
by: Claire |
last post by:
I want to declare a set of descendent exception classes that contains no
extra code to the base. It's so I can test the class type of exception and
handle its error code differently depending on the exception that was
thrown.
I come from a delphi background so for this I would have something like
type ClassA = class
public
constructor create(errormessage : message; errorcode : integer);
|
by: L Scott |
last post by:
I've created a page ancestry (framework) for our application so that all
pages in our app would have the same look and feel. To do this, I created
several user controls (header, footer, menu, etc.) and then a C# class which
inherits from System.Web.UI.Page. In the OnInit() method of this class, I
dynamically load these user controls using the 'this.Controls.AddAt()'
method (as well as call the base.OnInit() method to load the objects from...
| | |
by: Biguana |
last post by:
Hi,
Apologies in advance for a newbie question, but I'm trying to decipher
css stuff, I can't find a direct parallel in web tutorials, and I'm not
sure what to search on.
My problem is that I'm familiar with multiple selectors (and various
types of selectors) but what does it mean if they are arranged like
this? :
|
by: Rhino |
last post by:
What's the simplest way to determine which, if any, of my selectors are not
needed in a given stylesheet?
I have a small number of HTML pages that share two stylesheets; one
stylesheet is for display purposes and one is for printing. I suspect that
some of the selectors in my stylesheet are no longer needed due to deletions
of parts of the HTML pages and would like to remove those selectors from my
stylesheets. But I'd like to avoid a...
|
by: John Dann |
last post by:
I'm unclear as to how best to use what I'm terming the top-level CSS
selectors, by which I mean selectors like *, html and body. I'm coming
at this from trying to understand how best to set font sizes but I
seem to have strayed into a broader question.
Some CSS guides seem to suggest that a * declaration is good practice
for any style sheet, primarily I suppose to set zero defaults for
margin and padding for all other relevant selectors...
|
by: Nathan Sokalski |
last post by:
I'm not sure if this is the right place to ask this question, but I wasn't
sure where else to go. I have a table made of the following tags:
<table class="myclass">
<tbody>
<tr><td>.</td></tr>
<tr><td>.</td></tr>
<tr><td>.</td></tr>
</tbody>
</table>
|
by: Hystou |
last post by:
Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can effortlessly switch the default language on Windows 10 without reinstalling. I'll walk you through it.
First, let's disable language synchronization. With a Microsoft account, language settings sync across devices. To prevent any complications,...
|
by: Oralloy |
last post by:
Hello folks,
I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>".
The problem is that using the GNU compilers, it seems that the internal comparison operator "<=>" tries to promote arguments from unsigned to signed.
This is as boiled down as I can make it.
Here is my compilation command:
g++-12 -std=c++20 -Wnarrowing bit_field.cpp
Here is the code in...
| | |
by: Hystou |
last post by:
Overview:
Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows Update option using the Control Panel or Settings app; it automatically checks for updates and installs any it finds, whether you like it or not. For most users, this new feature is actually very convenient. If you want to control the update process,...
|
by: tracyyun |
last post by:
Dear forum friends,
With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each protocol has its own unique characteristics and advantages, but as a user who is planning to build a smart home system, I am a bit confused by the choice of these technologies. I'm particularly interested in Zigbee because I've heard it does some...
|
by: agi2029 |
last post by:
Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing, and deployment—without human intervention. Imagine an AI that can take a project description, break it down, write the code, debug it, and then launch it, all on its own....
Now, this would greatly impact the work of software developers. The idea...
|
by: isladogs |
last post by:
The next Access Europe User Group meeting will be on Wednesday 1 May 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM).
In this session, we are pleased to welcome a new presenter, Adolph Dupré who will be discussing some powerful techniques for using class modules.
He will explain when you may want to use classes instead of User Defined Types (UDT). For example, to manage the data in unbound forms.
Adolph will...
|
by: 6302768590 |
last post by:
Hai team
i want code for transfer the data from one system to another through IP address by using C# our system has to for every 5mins then we have to update the data what the data is updated we have to send another system
|
by: muto222 |
last post by:
How can i add a mobile payment intergratation into php mysql website.
| | |
by: bsmnconsultancy |
last post by:
In today's digital era, a well-designed website is crucial for businesses looking to succeed. Whether you're a small business owner or a large corporation in Toronto, having a strong online presence can significantly impact your brand's success. BSMN Consultancy, a leader in Website Development in Toronto offers valuable insights into creating effective websites that not only look great but also perform exceptionally well. In this comprehensive...
| |
