CODEWITHSUNDEEP
csscss-selectors
Youakeem
Youakeem

Reputation: 93

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

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.

Upvotes: 9

Views: 10584

Answers (2)

funky-nd
funky-nd

Reputation: 709

I think, this is easier than the accepted answer:

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

Upvotes: 2

David Thomas
David Thomas

Reputation: 253506

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:

Upvotes: 20

Related Questions