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

Unable to style tables by <col> and descendant class

P: n/a
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
####################
Jul 20 '05 #1
Share this Question
Share on Google+
7 Replies


P: n/a
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/
Jul 20 '05 #2

P: n/a
"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
####################
Jul 20 '05 #3

P: n/a
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/
Jul 20 '05 #4

P: n/a
.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
Jul 20 '05 #5

P: n/a
"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
####################
Jul 20 '05 #6

P: n/a
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

Jul 20 '05 #7

P: n/a
"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
####################
Jul 20 '05 #8

This discussion thread is closed

Replies have been disabled for this discussion.