multiple classnames

[Jeff Thies]

I have a table that I would like to style cell background colors. I'd
like to style rows and columns and give an "intersecting" cell a
different background color. That cell may look like this:

<td class="row_1_class column_1_class">selected cell</td>

Can I set a style that will only apply to an element that has both
classes?

Jeff

[David Dorward]

Jeff Thies wrote:

Can I set a style that will only apply to an element that has both
classes?

..foo.bar {

}

.... except that Internet Explorer is a buggy little beast and will (IIRC)
treat it as .foo, .bar { } (or maybe it was .foo { }).

--
David Dorward <http://blog.dorward.me.uk/> <http://dorward.me.uk/>
Home is where the ~/.bashrc is

[Danny]

"Jeff Thies" <je**@spamalanadingong.com> wrote in message
news:gB*****************@newsread2.news.atl.earthl ink.net...

I have a table that I would like to style cell background colors. I'd
like to style rows and columns and give an "intersecting" cell a different
background color. That cell may look like this:

<td class="row_1_class column_1_class">selected cell</td>

Can I set a style that will only apply to an element that has both
classes?

The following style works when used in a valid HTML4.01-Strict document.
Tested in IE6, Firefox1.0.4 and Opera8.01 and Opera6.04

<style type="text/css">
.tablecolumn{background-color:#FF0000}
.tablerow{background-color:#00FF00}
.tablerow .tablecolumn{background-color:#FFFF00}
</style>

[Christoph Päper]

Danny@Kendal:

"Jeff Thies" <je**@spamalanadingong.com>

I have a table that I would like to style cell background colors. I'd
like to style rows and columns and give an "intersecting" cell a different
background color.

'background' is one of the few properties that applies to boxes with
'display' set to 'table-column' (or 'table-column-group'), like HTML's
'col' (or 'colgroup') element type. Of course it also applies to
'table-row' ('tr'). You will only see the top-most non-transparent
background, i.e. the one of the deepest nested box.

CSS 'display' | HTML element type
----------------------+-----------------------
table | table |
(> table-caption | > caption) ¦ table-column-group | > colgroup |

table-column | >> col | layer table-row-group | > thead, tfoot, tbody |

table-row | >> tr |

table-cell | >>> th, td V

In the tree models of CSS and HTML every element instance can be the
child of only one parent (and so forth, iterated up to :root), so it has
only one ancestary line from which it can inherit. Therefore a table
cell inherits from a row, but not from a column. IOW, "tr td {foo: bar}"
works, but "col td {foo: baz}" does not and of course there is no double
ancestor selector like hypothetically "tr&col td"---not even in IE that
has a non-conformant implementation of tables, which allows some other
desired stuff for columns (like 'text-align' or 'color').

There have been several proposals to add some kind of column selector to
CSS, but as of yet they were all flawed; mostly in that they do not
resolve the paradoxon, that you could select something depending on a
certain property and then change that very property, so the selector
should not have matched in the first place and the rule would not have
been used and so on.

Anyhow, there are more or less advanced concepts to deal with this
issue, but not a perfect one.

...<col class="bar">...
<tr>...<td>Quuz</td>...</tr>
<!-- or -->
<tr>...<td class="bar">Quuz</td>...</tr>

<tr class="foo">...<td class="bar">Baz</td>...</tr>

.foo {background: #F00}
.bar {background: #847}

.foo .bar {background: #ABC} /* can fail with nested tables */
/* or */
.foo>.bar {background: #ABC} /* fails in CSS1 browsers like IE */
/* or */
.foo > .bar {background: #ABC} /* can fail in IE */

or

<tr><td>...</td><td class="bar">Quuz</td>...</tr>
<tr><td class="foo">Quuz</td><td class="foo bar">Baz</td>...</tr>

.foo {background: #F00}
.bar {background: #847}

.foo.bar {background: #ABC} /* works wrongly in IE */
/* or */
.bar.foo {background: #ABC} /* works wrongly in IE */

or

<tr><th><td><td>Quuz</td>...</tr>
<tr class="foo"><th><td><td>Baz</td>...</tr>

.foo {background: #F00}

th+td+td {background: #847}
/* or */
tr>th+td+td {background: #847}
/* or */
tr>:first-child+*+* {background: #847}
/* or */
tr>*:first-child+*+* {background: #847}
/* or */
th:first-child+td+td {background: #847}
/* ... */

.foo>th+td+td {background: #ABC}
/* or */
.foo>:first-child+*+* {background: #ABC}
/* or */
.foo>th+*+* {background: #ABC}
/* or some other combination thereof */
/* beware of 'Rowspan' and 'colspan' */
/* '>' and '+' fail in IE, I'm not sure about ':first-child' */

and some variations.
.tablerow .tablecolumn{background-color:#FFFF00}

That is not the same as

.tablerow.tablecolumn{background-color:#FFFF00}

though, which the OP asked for.

[spool]

"Jeff Thies" <je**@spamalanadingong.com> wrote in message
news:gB*****************@newsread2.news.atl.earthl ink.net...

I have a table that I would like to style cell background colors. I'd
like to style rows and columns and give an "intersecting" cell a different
background color. That cell may look like this:

<td class="row_1_class column_1_class">selected cell</td>

Can I set a style that will only apply to an element that has both
classes?

Jeff

Hi jeff

i need to do this recently and so i:
<td class="first_class"><span class="second_class">text</span></td>
Maybe this would work in your context?

Penrose