CSS "nth-child" Processing

How to apply CSS styles to complex selection of child elements

I can never remember the format of the nth-child CSS selector, so this is a quick summary...

The 2nd element in the parent that is a div...

div:nth-child(2) { ... }

Every 3rd element in the parent that is a div...

div:nth-child(3n) { ... }

Every 4th element in the parent that is a div, starting on the 5th one...

div:nth-child(4n+5) { ... }

Every child element in the parent this is a div, starting with the 6th one...

div:nth-child(1n+6) { ... }

You can also use nth-child(odd) and nth-child(even) instead of nth-child(n2+1) and nth-child(n2) respectively.

Note, div:nth-child(3) will not match the third div in the parent... it will match if the third element of the parent is a div.

You can also use this CSS checker to test