On Mar 12, 2008, at 8:55 AM, Brad Kemper wrote:
> [...] This really is a mathematical formula, where "n" is the
> progressively larger number representing the number of times
> repeated so far, starting with zero and increasing by one with each
> iteration (when using "+"). For each value of "n", solving the
> formula tells you which child number to apply the style to. [...]
>
> I think the spec is not really that clear on the fact that this
> really is a mathematical formula in which n = {0,1,2,3,4...}, where
> solving the equation gives you the child number (assuming the child
> elements are numbered starting with 1). It never really comes out
> and says it that explicitly, even though it gives examples where
> a=1 or b=0 or a is negative, etc. and the math continues to work.
One thing that seems very wrong with the spec is this part;
:nth-child(10n-1) /* represents the 9th, 19th, 29th, etc, element */
:nth-child(10n+9) /* Same */
In other words, if b is negative then b = (a + b)
(the negative b is added to a, thus reducing it by the absolute value
of b; this now positive value is then substituted for the previously
negative value in the equation) .
To my way of thinking, the two rules shown above should not be the
same. Let me explain...
For all the other examples given for nth-child, the following all
works out beautifully:
given (using existing (an+b) convention):
a = multiplier for "n". Absolute value of which is the "grouping
size" of which only one element of the group receives the style of
the rule
b = ordinal number of the child element within each "a" group that
receives the style of the rule
n = set of integers starting with 0, inserted into the formula one
integer at a time, stopping when there are no remaining elements.
c = total number of child elements
t = total number of child elements that receives the style of the rule
i = ignored solutions of equation after solving for the "n" values
(where the equation equals a negative number or zero, since they
repressent child element ordinal numbers that are not in the document
tree)
then:
an-b = set of numbers representing ordinal identification of child
elements
t = c / abs(a) - (number of "i" values)
So if you imagine a 12 row table, then the following is true given
the selectors shown (and agrees with the spec):
tr:nth-child(2n+1) { color: red; }
number of rows colored red (t) = 12 / 2
red row numbers = 2 * { 0,1,2,3,4,5... } + 1
red row numbers = { 0,2,4,6,8,10 } + 1
red row numbers = { 1,3,5,7,9,11 }
t = 6 red rows
tr:nth-child(4n+1) { color: green; }
number of rows colored green (t) = 12 / 4
green row numbers = 4 * { 0,1,2,3,4,5... } + 1
green row numbers = { 0,4,8 } + 1
green row numbers = { 1,5,9 }
t = 3 green rows
tr:nth-child(-n+6) { color: blue; }
number of rows colored blue (t) = 12 / 1
blue row numbers = -1 * { 0,1,2,3,4,5... } + 6
blue row numbers = { 0,-1,-2,-3,-4,-5 } + 6
blue row numbers = { 6,5,4,3,2,1 }
t = 6 blue rows
However:
tr:nth-child(4n-1) { color: orange; }
number of rows colored orange (t) = 12 / 4
orange row numbers = 4 * { 0,1,2,3... } - 1
orange row numbers = { 0,4,8,12 } - 1
orange row numbers = { -1,3,7,11 }
orange row numbers = { 3,7,11 } (nonsense values removed)
t = 3 orange rows
Not the same as:
tr:nth-child(4n+3) { color: orange; }
number of rows colored orange (t) = 12 / 4
orange row numbers = 4 * { 0,1,2,3... } +3
orange row numbers = { 0,4,8,12 } +3
orange row numbers = { 3,7,11,12 }
t = 4 orange rows
Thus:
Having a negative "b" value could add power to the spec by letting
you style all but the last 1 or more child elements. This would also
make the math more sensible, and lead to an easier time for
JavaScript to be able to determine which rows received the style. I
see no upside to having this single part of the spec deviate from
mathematical perfection.