How to select 1st, 4th, 7th element and so on?

Question

How could I select the 1st, 4th, 7th elements and so on ?! also how to select the 3rd, 6th, 9th and so on?

the pattern is selecting and element then leaving two and selecting the third. I know I should use :nth-child, but I don't know how exactly.

Answer 1

I think, this is easier than the accepted answer:

li:nth-child(3n - 2) {
    padding-left: 0; // etc
}

Answer 2

To style the first, fourth, seventh (and so on) elements, the easiest method is, with CSS, to use the following (I'm assuming you're working with li elements, but obviously adapt to your use-case):

ul {
    counter-reset: lis;
}

li::after {
    counter-increment: lis;
    content: counter(lis, decimal);
}

li:nth-child(3n+1) {
    background-color: #f90;
}

JS Fiddle demo.

References:

• CSS selectors.
• :nth-child().