Unable to style tables by <col> and descendant class

[Philip Herlihy]

If I'm reading my reference books correctly, I should be able to pick out
cells in a table by combining a <col> selector with a class selector, like
this:
col#thisid td.thisclass {color: red; }
... but it doesn't work. I can get the unadorned <col> selector to work in
IE6 and Opera (not Dreamweaver 2004):
col#thiscol {color: red; }
... but when I add a descendent selector it stops working. I'd be grateful
for advice or comments.

Example here:
http://philipherlihy.members.beeb.ne...-selectors.htm

--
####################
## PH, London
####################

[Mark Tranchant]

Philip Herlihy wrote:

If I'm reading my reference books correctly, I should be able to pick out
cells in a table by combining a <col> selector with a class selector, like
this:
col#thisid td.thisclass {color: red; }
.. but it doesn't work. I can get the unadorned <col> selector to work in
IE6 and Opera (not Dreamweaver 2004):
col#thiscol {color: red; }
.. but when I add a descendent selector it stops working. I'd be grateful
for advice or comments.

http://www.w3.org/TR/CSS21/tables.html#q4 may help explain this.

--
Mark.
http://tranchant.plus.com/

[Philip Herlihy]

"Mark Tranchant" <ma**@tranchant.plus.com> wrote in message
news:41***********************@ptn-nntp-reader04.plus.net...

Philip Herlihy wrote:

If I'm reading my reference books correctly, I should be able to pick out cells in a table by combining a <col> selector with a class selector, like this:
col#thisid td.thisclass {color: red; }
.. but it doesn't work. I can get the unadorned <col> selector to work in IE6 and Opera (not Dreamweaver 2004):
col#thiscol {color: red; }
.. but when I add a descendent selector it stops working. I'd be grateful for advice or comments.

http://www.w3.org/TR/CSS21/tables.html#q4 may help explain this.

Thanks, Mark - I've studied that reference (and learned something). I'm not
sure that's it, though. When I tried colouring an entire column using a
<col> selector it worked in IE6 and Opera. It was when I added the
descendant <td> class selector then it didn't. If I understand things
correctly (?) then a descendant selector combination (in my example:
col#col2 td.special) picks out the child element only - in this case the
<td> . That should be on the top of the layer model and so the settings of
rows, rowgroups, etc shouldn't matter.

I'm sorry to say I've now spotted mistakes in my original example. I've
corrected these (muddled id and class names) and added a <col>-based
selector which turns text in column 3 pink. That shows the single col-based
selector is working, but the double "col with td.class" one still isn't.

My workaround is to add class names to every cell in a large table, which
makes me wince...
--
####################
## PH, London
####################

[Brian]

Mark Tranchant wrote:

Philip Herlihy wrote:

If I'm reading my reference books correctly, I should be able to
pick out cells in a table by combining a <col> selector with a
class selector, like this:
col#thisid td.thisclass {color: red; }
.. but it doesn't work.

http://www.w3.org/TR/CSS21/tables.html#q4 may help explain this.

Have a look, too, at this:

http://ln.hixie.ch/?start=1070385285&count=1

--
Brian (remove "invalid" to email me)
http://www.tsmchughs.com/

[Michael Fesser]

.oO(Philip Herlihy)

"Mark Tranchant" <ma**@tranchant.plus.com> wrote

http://www.w3.org/TR/CSS21/tables.html#q4 may help explain this.
Thanks, Mark - I've studied that reference (and learned something). I'm not
sure that's it, though. When I tried colouring an entire column using a
<col> selector it worked in IE6 and Opera. It was when I added the
descendant <td> class selector then it didn't. If I understand things
correctly (?) then a descendant selector combination (in my example:
col#col2 td.special) picks out the child element only

Yes, but ...
- in this case the
<td> .

.... td-elements are _no_ children of col-elements, in fact col-elements
are empty. Cells are children of rows, so you can't select cells in a
column.

Micha

[Philip Herlihy]

"Brian" <us*****@julietremblay.com.invalid> wrote in message
news:md********************@bgtnsc04-news.ops.worldnet.att.net...

Mark Tranchant wrote:

Philip Herlihy wrote:

If I'm reading my reference books correctly, I should be able to
pick out cells in a table by combining a <col> selector with a
class selector, like this:
col#thisid td.thisclass {color: red; }
.. but it doesn't work.

http://www.w3.org/TR/CSS21/tables.html#q4 may help explain this.

Have a look, too, at this:

http://ln.hixie.ch/?start=1070385285&count=1

Interesting article! (I must say as I've struggled to learn to use CSS
reliably I've grown an appreciation of just how complex and sophisticated a
browser is.)

I take two things from this new article:
1) As what I'm actually after is "background-color" then it ought to work
(have changed my example again):
http://philipherlihy.members.beeb.ne...-selectors.htm
2) Perhaps we're expecting too much of browsers...
--
####################
## PH, London
####################

[Steve Pugh]

On Fri, 1 Oct 2004 20:30:18 +0000 (UTC), "Philip Herlihy"
<fo******@herlihy.eu.veil.com> wrote:

"Brian" <us*****@julietremblay.com.invalid> wrote in message
news:md********************@bgtnsc04-news.ops.worldnet.att.net...

Mark Tranchant wrote:

> Philip Herlihy wrote:
>
>> If I'm reading my reference books correctly, I should be able to
>> pick out cells in a table by combining a <col> selector with a
>> class selector, like this:
>> col#thisid td.thisclass {color: red; }
>> .. but it doesn't work.
>
> http://www.w3.org/TR/CSS21/tables.html#q4 may help explain this.
Have a look, too, at this:

http://ln.hixie.ch/?start=1070385285&count=1

Interesting article! (I must say as I've struggled to learn to use CSS
reliably I've grown an appreciation of just how complex and sophisticated a
browser is.)

I take two things from this new article:
1) As what I'm actually after is "background-color" then it ought to work

If you apply it as a style to the col element, so your #col3 {...}
style should be, and indeed is, applied.
(have changed my example again):
http://philipherlihy.members.beeb.ne...-selectors.htm

No it should not work.
#col2 td.special {...}
is a match for all <td> elements with class=special that are
descendents of the element with id=col2

But id=col2 is a <col> element and <td> elements are NEVER descendents
of col elements. As detailed in the W3C page referenced above.

So your selector doesn't match anything. Hence there is nowhere to
apply your style, and so the browsers are getting it perfectly
correct.

Steve

[Philip Herlihy]

"Steve Pugh" <st***@pugh.net> wrote in message
news:h9********************************@4ax.com...

On Fri, 1 Oct 2004 20:30:18 +0000 (UTC), "Philip Herlihy"
<fo******@herlihy.eu.veil.com> wrote:

"Brian" <us*****@julietremblay.com.invalid> wrote in message
news:md********************@bgtnsc04-news.ops.worldnet.att.net...

Mark Tranchant wrote:
> Philip Herlihy wrote:
>
>> If I'm reading my reference books correctly, I should be able to
>> pick out cells in a table by combining a <col> selector with a
>> class selector, like this:
>> col#thisid td.thisclass {color: red; }
>> .. but it doesn't work.
>
> http://www.w3.org/TR/CSS21/tables.html#q4 may help explain this.

Have a look, too, at this:

http://ln.hixie.ch/?start=1070385285&count=1

....1) As what I'm actually after is "background-color" then it ought to

work
If you apply it as a style to the col element, so your #col3 {...}
style should be, and indeed is, applied.
.... #col2 td.special {...}
is a match for all <td> elements with class=special that are
descendents of the element with id=col2

But id=col2 is a <col> element and <td> elements are NEVER descendents
of col elements. As detailed in the W3C page referenced above.

So your selector doesn't match anything. Hence there is nowhere to
apply your style, and so the browsers are getting it perfectly
correct.

Thanks, Steve. I'm grateful for the clarification - as I now understand it,
a <col> is an independent layer with no descendents. What a pity, though!
I have a large table (thousands of small cells) which is intended to be a
visual cross-reference. I want to be able to colour cells in the "key" part
of the table so that "flagged" cells in different columns are different
colours (so if you're in the buying department you look for the green cells
against document names). The only way I can see now to do it is to have as
many classes as there are columns, so instead of simply having a class
"flagged" and using the col-id, I now have to have classes "flagged-col1",
"flagged-col2", etc. Seems a lot more redundant and so prone to error.

Fantasising now - what I'd really like is a "content value" selector: e.g
any element containing the substring "banana" (or even a regular
expression!) should have background image "xyz.gif" and the text itself
should not be visible.

Anyway, thanks for pointing out my misunderstanding!

--
####################
## PH, London
####################