Stylesheets - Inconsistent application of child selection operator

Author

Inconsistent application of child selection operator

Harlan Messinger

2004-11-23, 4:23 am

At http://www.gavelcade.com/tests/part...ecognition.html is an
illustration of an apparent inconsistency in the way the child selection
operator > is handled with respect to tables, rows, and cells. I'm trying to
bold-face the first column of a two column table. I try the following five
variations (the five tables in the demo are assigned classes a, b, c, d, and
e, respectively):

table.a td:first-child { font-weight: bold; }
table.b tr td:first-child { font-weight: bold; }
table.c tr > td:first-child { font-weight: bold; }
table.d > tr td:first-child { font-weight: bold; }
table.e > tr > td:first-child { font-weight: bold; }

The first three variations work in Netscape 7.01, Firefox 1.0, and Opera
7.54. The last two work in none of those browsers.

I've experimented and found that the cause has nothing to do with my use of
:first-child, because if I remove it, then all the cells in the first three
tables are bolded and none of the cells in the last two tables is.

It has nothing to do with the COL elements because the same thing happens
when I remove them.

I thought it might have something to do with using the > character in the
stylesheet, but I tried both changing it to > throughout and moving the
styles to an external stylesheet, and neither made a difference in the
outcome.

--
Harlan Messinger
Remove the first dot from my e-mail address.
Veuillez ôter le premier point de mon adresse de courriel.

Brian

2004-11-23, 4:23 am

Harlan Messinger wrote:
> I'm trying to bold-face the first column of a two column table. I
> try the following five variations (the five tables in the demo are
> assigned classes a, b, c, d, and e, respectively):
>
> table.a td:first-child { font-weight: bold; }
> table.b tr td:first-child { font-weight: bold; }
> table.c tr > td:first-child { font-weight: bold; }
> table.d > tr td:first-child { font-weight: bold; }
> table.e > tr > td:first-child { font-weight: bold; }
>
> The first three variations work in Netscape 7.01, Firefox 1.0, and
> Opera 7.54. The last two work in none of those browsers.

Per the HTML recommendation, when <tbody> is not in the code, it is
implied, much like </p> or </li> when those end tags are missing. (Take
a look at the tree using the Mozilla DOM inspector and you'll see the
<tbody> element.) Try this instead:

table.d > tbody tr td:first-child { font-weight: bold; }
table.e > tbody tr > td:first-child { font-weight: bold; }

BTW, I realize that this is just a test case, but what's wrong with the
first 3 to do what you want?

--
Brian (remove "invalid" to email me)

Harlan Messinger

2004-11-23, 4:23 am

"JP. Baker" <ccjpb@shark.cse.bris.ac.uk> wrote in message
news:I7Fx2v.GK1@bath.ac.uk...
> In article <306sjbF2ruo6aU1@uni-berlin.de>,
> Harlan Messinger <h.messinger@comcast.net> wrote:
>
> I think you will find that there is an implicit tbody between a
> table and its tr - try 'table.f > tbody > tr ...'. Check with DOM
> Inspector or Web Developers toolkit.

Arg! Thanks for reminding me. That's the problem exactly. Damn TBODY!

Harlan Messinger

2004-11-23, 4:23 am

"Brian" <usenet3@julietremblay.com.invalid> wrote in message
news:UDrnd.37408$7i4.28899@bgtnsc05-news.ops.worldnet.att.net...
> Harlan Messinger wrote:
>
> Per the HTML recommendation, when <tbody> is not in the code, it is
> implied, much like </p> or </li> when those end tags are missing. (Take
> a look at the tree using the Mozilla DOM inspector and you'll see the
> <tbody> element.) Try this instead:

Yup, that's exactly it, I'd forgotten to impute a TBODY.

>
> table.d > tbody tr td:first-child { font-weight: bold; }
> table.e > tbody tr > td:first-child { font-weight: bold; }
>
> BTW, I realize that this is just a test case, but what's wrong with the
> first 3 to do what you want?

Oh, I just meant to show where in which the shift from using descendent
selectors to using child selectors the problem began to appear.