Style every third element?

Question

How can I style every third element with plain CSS.

I have seen questions like this, but they involve javascript. I want a plain CSS solution. I know I can use

Answer 1

With pure css this can be easily done. You can define CSS Selector and change the desired child property. For your case below is suitable.

section > div:nth-child(3n+1) {
    background: green;
}

How this work.

Pseudo-elements and pseudo-classes

Here above work like below

if n = 0 then 3*0 + 1 = 1
if n = 1 then 3*1 + 1 = 4
if n = 2 then 3*2 + 1 = 7
if n = 3 then 3*3 + 1 = 10
...........

If you want every 3rd element then your css looks like

section > div:nth-child(3n+3) {
    background: green;
}

Here above work like below

if n = 0 then 3*0 + 3 = 3
if n = 1 then 3*1 + 3 = 6
if n = 2 then 3*2 + 3 = 9
if n = 3 then 3*3 + 3 = 12
...........