How to select 1st, 4th, 7th element and so on?
css, css-selectors
Solution
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()`.
Problem
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.