[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/
