If I understand the problem correctly, you're looking for a way to select just the 3rd and 5th column. Here is a way: td:nth-child(-2n+5):not(:first-child)
or td:nth-child(-2n+5):nth-child(n+3)
(I'm not sure whether using 'nested selectors'[I just made this term up and am unsure if it is real] i.e. :not(:first-child)
is faster than using Functional Notation i.e. :nth-child(n+3)
or not[my guess is yes, since the latter seems to involve extra iteration; see below in the long-winded explanation])
Reference (scroll to "Examples" section to see all possibilities and further down to the "Browser compatibility" section for, you guessed it, browser compatibility)
Here's a long-winded explanation:
The method that @Turnerj touched on in his answer and that @bansal was looking for and that solves the original question is described in the reference as "Functional Notation".
An+B
Represents elements whose numeric position in a series of siblings matches the pattern An+B, for every positive integer or zero value of n. The index of the first element is 1. The values A and B must both be integers.
For example, if you want child 3 through the last child you could do :nth-child(n+3)
. (A=1; B=3)
Like the quote says, n always starts from 0. Let's say there are 5 children for example. This gives you:
- child 3(0+3)
- child 4(1+3)
- child 5(2+3)
3+3 will result in child 6 which doesn't exist. And since n starts at 0 and doesn't go negative, there's no way to select child 2 or 1.
You can also get child 3 to the beginning by doing :nth-child(-n+3)
. (A=-1; B=3)
- child 3(-1*0 + 3)
- child 2(-1*1 + 3)
- child 1(-1*2 + 3)
- no child: 0=(-1*3 + 3)
If you want every 4th child starting from the 3rd to last child going backwards in a group of 15 children, :nth-child(4n-3)
. (A=4; B=-3)
Following the same logic as before:
- no child: -3=(4*0 - 3)
- child 1(4*1 - 3)
- child 5(4*2 - 3)
- child 9(4*3 - 3)
- child 13(4*4 - 3)
Even though you're going backwards, A
[the coefficient of n
] stays positive because B
is negative, which can be thought of as starting at -3(3rd to last). If the coefficient was negative, you'd descend into the negatives and never get a positive number(which is where the children are). In the same scenario, the same result could also be achieved by
:nth-child(-4n+13)
(every 4th child going backwards starting from the 13th child)
:nth-child(4n+1)
(every 4th child starting at the 1st child)
:nth-child(4n-15)
(every 4th child starting from the 15th to last child)
Notice that :nth-child(4n+5)
will exclude child 1 because n
cannot be negative. To get all the children in the sequence(1,5,9,13 in this example),
the rest of this paragraph has been edited
with B
being POSITIVE, the pattern must start at one of the ends of the sequence(1st or 13th in this example). Any pattern starting at the 9th or 5th will exclude other numbers. It will NOT loop to the beginning like modulo(%). But if B
is negative(-7 or -11 for 9th and 5th, respectively, in this example), you will always get all the children in the sequence regardless of where you start, assuming, as mentioned before, that A
[coefficient of n
] is kept positive.
You can do :nth-child(odd)
(:nth-child(2n+1)
) and :nth-child(even)
(:nth-child(2n)
), but the one I was most interested in was getting the internal ranges. This is just done by taking the intersect of two :nth-child()
's.
For example, if you want just the 3rd and 5th column, in a table with 490 columns (it doesn't matter to the problem, I just chose it because it's how many times we should forgive each person per day)
td:nth-child(-n+5)
gives you child 1-5 or child < 5
td:nth-child(n+3)
gives you child 3-490 or child > 3
td:nth-child(odd)
gives you I think you get it
So all together that's: td:nth-child(-n+5):nth-child(n+3):nth-child(odd)
. (The columns that are less than 5 AND greater than 3 AND odd[this takes out child #4].)
I put it in this order to minimize how many results each selector would create for the next one. If, you put td:nth-child(n+3)
first, you'd get the same final results, but you'd pass child 3-490 to the next selector instead of just passing child 1-5. This probably makes an insignificant increase in performance, but maybe could be useful at larger scales.
I'm not sure if this last bit about order is actually how it works for any browser at all, or if browsers already optimize that, but that was just my thought process.
At the end of writing all this, I thought of td:nth-child(-n+5):nth-child(2n+3)
. Then I thought of td:nth-child(-2n+5):nth-child(n+3)
and edited again, but I'd already explained the solution I had originally, so I won't erase that and re-explain this one because I think this last solution makes sense from all the other examples given. I'll just say that I think the last one is best since the 1st nth-child selector i.e. td:nth-child(-2n+5)
passes only 3 td
s to the 2nd selector instead of the 5 td
s that td:nth-child(-n+5)
would pass on.