I’ve known about `nth-child`

for quite some time. It’s not new to me, and I’ve even google a few tutorials on how to use it. There’s some stuff I’m going to explain here that hasn’t been explained elsewhere, but let’s start the basics:

I’m going to use the following html for the examples:

`x:nth-child(n)`

selects anything that matches selector `x`

that is the nth-child of its parent. So, selecting `div.example > div:nth-child(4)`

and setting `{background:green}`

will produce the following result:

Then, you’ve got `nth-child(even)`

and `nth-child(odd)`

which do exactly what you’d expect. I’ll apply `border:solid 2px black`

to odd children and `background:purple`

to even ones:

The last of the basics is that you can use certain formulas that behave like `modulo`

operators. `nth-child(3n)`

for example selects the 3rd, 6th, 9th, etc. children. `nth-child(3n+1)`

selects the 1st, 4th, 7th, etc.

What I recently wanted to achieve was to use one of those `modulo`

selectors, but without affecting some of the first ones. I wanted to use `nth-child(3n+2)`

, which normally selects the 2nd, 5th, 8th etc elements, but I didn’t want it to select the 2nd one. My first idea was to use `(3n+5)`

instead (as 5%3 == 2%3 obviously), but that didn’t seem to work.

OK, that technique *does* work. You can see above I applied `background:orange`

with the selector `(3n+1)`

. Below I’ll show the result of the selector `nth-child(3n+4)`

:

So, that sorta dampens the entire spirit of this post. HOWEVER, perhaps most people didn’t know that you could do that, so maybe this will still be useful.

But anyway, the workaround I discovered (when I still thought `3n+4`

selected the same things as `3n+1`

) involves another `nth-child`

formula that I didn’t talk about: `(n+x)`

which selects the xth element and beyond. In addition, `(-n+x)`

selects elements up to and including x. Apparently the selector works by iterating values of `n`

starting from 0 and going up until the selector is too large to apply to anything anymore, or *too small* in the case of a negative coefficient. I probably would have known that from the outset if I read any documentation.

I’ll use `nth-child(n+3)`

and `nth-child(-n+5)`

below, applying `backround:brown`

and `border:solid 2px black`

respectively:

All of the above formulas apply predictably to the `:nth-last-child()`

selector as well.

Now, with a clever combination of `:not`

, `:nth-child(modulo formula)`

, `nth-child(n+x)`

and `:nth-last-child()`

you can create some really powerful methods of selecting (for some admittedly rare, niche use-cases). We can, for example, select elements whose `mod 4`

is 1, but only applying to, say, the last 8 elements with `div.example > div:nth-last-child(-n+8):nth-child(4n+1)`

:

Again, I realise that the use cases for this are probably not all that common, but I came across the need for a selector of this type in my own work so maybe you will too.