CODEWITHSUNDEEP
csscss-selectors
Laurent
Laurent

Reputation: 307

Writing a specific nth-child selector

I need some help with writing a nth-child selector in CSS for the following situations

Children #1, #4, #7, #10, ... should have specific css
Children #2, #3, #5, #6, ... should have some other specific css

Had this (:nth-child(3n-2)) for the first, but can't come up with something for the second.

Thanks!

Upvotes: 1

Views: 179

Answers (2)

BoltClock
BoltClock

Reputation: 724452

Are children #2, #3, #5, #6, ... just anything other than children #1, #4, #7, #10, ...?

If so, you can either just create a rule for all children in general, then override the styles for children #1, #4, #7, #10, ... like this:

.child {
    /* All children */
}

.child:nth-child(3n-2) {
    /* Override for #1, #4, #7, #10, ... */
}

Or if you need to specifically apply styles to those children without overriding, you can negate the same :nth-child() with :not() in a separate rule:

.child:nth-child(3n-2) {
    /* #1, #4, #7, #10, ... */
}

.child:not(:nth-child(3n-2)) {
    /* #2, #3, #5, #6, ... */
}

Upvotes: 3

Pouki
Pouki

Reputation: 1664

you can use :not(:nth-child(3n-2)) for the second

Upvotes: 2

Related Questions