HighDots Forums  

Inconsistent application of child selection operator

Cascading Style Sheets Layout/presentation on the WWW (comp.infosystems.www.authoring.stylesheets)


Discuss Inconsistent application of child selection operator in the Cascading Style Sheets forum.



Reply
 
Thread Tools Display Modes
  #1  
Old   
Harlan Messinger
 
Posts: n/a

Default Inconsistent application of child selection operator - 11-19-2004 , 12:33 PM






At http://www.gavelcade.com/tests/parti...cognition.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.


Reply With Quote
  #2  
Old   
JP. Baker
 
Posts: n/a

Default Re: Inconsistent application of child selection operator - 11-19-2004 , 01:06 PM






In article <306sjbF2ruo6aU1 (AT) uni-berlin (DOT) de>,
Harlan Messinger <h.messinger (AT) comcast (DOT) net> wrote:
Quote:
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 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.

nhoJ
--
John P Baker


Reply With Quote
  #3  
Old   
Harlan Messinger
 
Posts: n/a

Default Re: Inconsistent application of child selection operator - 11-19-2004 , 01:47 PM




"JP. Baker" <ccjpb (AT) shark (DOT) cse.bris.ac.uk> wrote

Quote:
In article <306sjbF2ruo6aU1 (AT) uni-berlin (DOT) de>,
Harlan Messinger <h.messinger (AT) comcast (DOT) net> wrote:
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 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!



Reply With Quote
  #4  
Old   
Harlan Messinger
 
Posts: n/a

Default Re: Inconsistent application of child selection operator - 11-19-2004 , 01:49 PM




"Brian" <usenet3 (AT) julietremblay (DOT) com.invalid> wrote

Quote:
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:
Yup, that's exactly it, I'd forgotten to impute a TBODY.

Quote:
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.



Reply With Quote
Reply




Thread Tools
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

vB code is On
Smilies are On
[IMG] code is On
HTML code is Off



Powered by vBulletin Version 3.5.4
Copyright ©2000 - 2008, Jelsoft Enterprises Ltd.