[css-d] grouping nth-child
[selecting specific elements in a table without id or class attributes]
Looking for a more elegant and versatile replacement for this:
tr:first-child + tr + tr + tr td:first-child,
tr:first-child + tr td:first-child + td,
tr:first-child + tr + tr td:first-child + td + td + td,
tr:first-child + tr + tr td:first-child + td + td + td + td + td,
tr:first-child + tr + tr + tr td:first-child + td + td + td + td + td {
background-color: lightgreen;
}
I thought, this might work just as well (especially for tables with a
lot of rows and cells):
tr:nth-child(0n+4) td:nth-child(0n+1),
tr:nth-child(0n+2) td:nth-child(0n+2),
tr:nth-child(0n+3) td:nth-child(0n+4),
tr:nth-child(0n+3) td:nth-child(0n+6),
tr:nth-child(0n+4) td:nth-child(0n+6) {
background-color: lightgreen;
}
I verified that the selectors all work by themselves. When grouping them
the element count seems to get out of sync and 'random‘ elements get
selected.
I also tried using the short form, e.g.:
tr:nth-child(4) td:nth-child(1),
...
...
Writing them as single rules did not change things much, either:
tr:nth-child(4) td:nth-child(1) { background-color: lightgreen; }
tr:nth-child(2) td:nth-child(2) { background-color: lightgreen; }
...
Putting a 'dummy' rule between these (thinking to 'reset' the counts)
somewhat changes the behaviour but not in a foreseeable way:
tr:nth-child(4) td:nth-child(1) { background-color: lightgreen; }
.dummy {}
tr:nth-child(2) td:nth-child(2) { background-color: lightgreen; }
...
Is there any explanation for the 'strange' behaviour of nth-child when
it gets grouped?
Best regards,
Jørgen W. Lang
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] grouping nth-child
Culprit: Safari 5.1/OS X 10.6.8
Test page: www.joergen-lang.de/test/nthchild-cells.html
The test case works fine on first load.
Reloading seems to mess things up.
The problem only occurs when working with a local copy with S5.1. Newer
webkits play along.
Jørgen
Am 04.08.11 11:10, schrieb Philippe Wittenbergh:
On Aug 4, 2011, at 5:45 PM, Joergen W. Lang wrote:
I thought, this might work just as well (especially for tables with a lot of
rows and cells):
tr:nth-child(0n+4) td:nth-child(0n+1),
tr:nth-child(0n+2) td:nth-child(0n+2),
tr:nth-child(0n+3) td:nth-child(0n+4),
tr:nth-child(0n+3) td:nth-child(0n+6),
tr:nth-child(0n+4) td:nth-child(0n+6) {
background-color: lightgreen;
}
I verified that the selectors all work by themselves. When grouping
them the element count seems to get out of sync and 'random‘
elements get selected.
Do you have a test page that shows that 'randomness' ? And which
browser does show the issue ?
With my test table, 30 rows, 6 columns the above works correctly in
WebKit/Safari5.1 and Fx-aurora build. Are there rows/cells with
colspan or rowspan ?
Philippe -- Philippe Wittenbergh http://l-c-n.com/
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] grouping nth-child
On Aug 4, 2011, at 6:52 PM, Joergen W. Lang wrote: Culprit: Safari 5.1/OS X 10.6.8 Test page: www.joergen-lang.de/test/nthchild-cells.html The test case works fine on first load. Reloading seems to mess things up. The problem only occurs when working with a local copy with S5.1. Newer webkits play along. Pretty weird. The first time I loaded your test case, it worked fine, then I reloaded and failure. I save the page locally, and it never worked correctly (from my local server). My basic table testcase is here: http://dev.l-c-n.com/_temp/nth-child_table.html The one difference I can see: thead, tbody, tfoot. And indeed, using those would solve your test case. Philippe -- Philippe Wittenbergh http://l-c-n.com/ __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] grouping nth-child
Am 04.08.11 13:31, schrieb Philippe Wittenbergh:
On Aug 4, 2011, at 6:52 PM, Joergen W. Lang wrote:
Culprit: Safari 5.1/OS X 10.6.8 Test page:
www.joergen-lang.de/test/nthchild-cells.html
[...]
The problem only occurs when working with a local copy with S5.1.
Newer webkits play along.
Pretty weird. The first time I loaded your test case, it worked fine,
then I reloaded and failure. I save the page locally, and it never
worked correctly (from my local server).
Only S5.1 or also other browsers?
My basic table testcase is here:
http://dev.l-c-n.com/_temp/nth-child_table.html
The one difference I can see: thead, tbody, tfoot. And indeed, using
those would solve your test case.
That indeed fixes it. Omitting tfoot appears to be OK.
Note:
When using thead/tbody, the row count is offset by 1 (header rows are
not counted). Same goes for adjacent siblings.
Note 2:
For styling th elements a more explicit selector is needed (assuming two
rows of th), e.g.:
thead tr:nth-child(2) th:nth-child(4) { ... }
Thanks a lot.
Jørgen
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] grouping nth-child
On Aug 4, 2011, at 10:58 PM, Joergen W. Lang wrote:
Pretty weird. The first time I loaded your test case, it worked fine,
then I reloaded and failure. I save the page locally, and it never
worked correctly (from my local server).
Only S5.1 or also other browsers?
Safari 5.1 - the nth-child selectors never kicked in, your original page was
open in another tab; I didn't 'save', I copied the source code from your page
into a new doc, saved it an opened it. As I said, real weird.
The one difference I can see: thead, tbody, tfoot. And indeed, using
those would solve your test case.
That indeed fixes it. Omitting tfoot appears to be OK.
Of course - the tfoot comes after the tbody in the rendering, and thus the
counting of rows.
When using thead/tbody, the row count is offset by 1 (header rows are not
counted). Same goes for adjacent siblings.
That is normal, each table-row-group resets the count.
For styling th elements a more explicit selector is needed (assuming two rows
of th), e.g.:
thead tr:nth-child(2) th:nth-child(4) { ... }
Why would that be ?
Philippe
--
Philippe Wittenbergh
http://l-c-n.com/
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] grouping nth-child
Am 04.08.11 16:46, schrieb Philippe Wittenbergh:
That indeed fixes it. Omitting tfoot appears to be OK.
Of course - the tfoot comes after the tbody in the rendering, and
thus the counting of rows.
Error on my side. I was mistaken because tfoot needs to be defined
before tbody.
When using thead/tbody, the row count is offset by 1 (header rows
are not counted). Same goes for adjacent siblings.
That is normal, each table-row-group resets the count.
Aha! Could that confuse S5.1? Implicit reset when it sees nth-child for
th and then td?
For styling th elements a more explicit selector is needed
(assuming two rows of th), e.g.:
thead tr:nth-child(2) th:nth-child(4) { ... }
Why would that be ?
I didn't think of the reset.
tr:nth-child(1) th
works just fine. Styling the tfoot seems to be a different story,
though. I do not see any other way to reference it explicitely without using
tfoot tr:nth-child(2) td:nth-child(3) { ... }
^
Or is there?
Best regards,
Jørgen
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] grouping nth-child
On Aug 5, 2011, at 12:56 AM, Joergen W. Lang wrote:
tr:nth-child(1) th
works just fine. Styling the tfoot seems to be a different story, though. I
do not see any other way to reference it explicitely without using
tfoot tr:nth-child(2) td:nth-child(3) { ... }
Indeed, if you need different styling for rows or cells in a tfoot, you need to
isolate it in your selector
better I think:
tfoot tr:nth-child(2) td:nth-child(3) { ... }
Of course - the tfoot comes after the tbody in the rendering, and
thus the counting of rows.
Error on my side. I was mistaken because tfoot needs to be defined before
tbody.
In html5, tfoot can come after tbody in the source code.
http://www.whatwg.org/specs/web-apps/current-work/multipage/tabular-data.html#the-tfoot-element
(the wording is more confusing that last time I checked that… :-p)
Philippe
--
Philippe Wittenbergh
http://l-c-n.com/
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
