How to choose the 1st, 4th, 7th, etc.?

Question

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

the template selects and the element then leaves two and selects the third. I know that I should use :nth-child , but I do not know how.

Answer 1

To style the first, fourth, seventh (etc.) elements, the easiest way is to use the following using CSS (I assume that you work with li elements, but obviously adapt to your case use):

 ul { counter-reset: lis; } li::after { counter-increment: lis; content: counter(lis, decimal); } li:nth-child(3n+1) { background-color: #f90; } 

JS Fiddle demo .

Literature:

• CSS selector
• :nth-child() .