Can someone explain to me ":nth-child(4n)" syntax?

Hi Wojti,

nth-child is only the name that was chosen for this pseudo class. No numbers are going in for that 'n' and the hyphen is not a minus sign. It's only part of the name.

Figuring out which elements will be selected is determined by the expression inside the parentheses.

It takes the general form of an + b. You can pick any integers you want for a and b

n takes on the values 0, 1, 2, 3, 4... in order to figure out which elements will be selected.

Using your 4n example:

 n | 4n
 ------
 0 | 0
 1 | 4
 2 | 8
 3 | 12

Child numbering always starts at 1. So in the second column of that table, you would ignore anything that's not positive. In this case we would ignore the 0 entry. From that, you can see that children 4, 8, 12... will be selected.

This is probably along the lines of how the browser figures this out. But substituting values of 'n' and making a table isn't very convenient for us if we want to quickly know what will be selected.

Here's how I read an + b expressions. b is what you start with and a is what you keep adding.

Using 4n + 3 as an example, you start with 3 and you keep adding 4.

That gives us 3, 7, 11, 15...

Another example, -n + 5 (b is 5 and a is -1)

Start with 5 and then keep adding -1

5, 4, 3, 2, 1, 0, -1, -2, -3...

Since child numbering starts at 1 and goes up, we would discard the 0 and all those negative numbers which would give us the first 5 children.