Kevin Powell - Community•2y ago

Tricky nth-child

I have a long list of elements. Using nth-child for example I want to select elements 2-4 6-8 10-12 ... how would i do it?

4 Replies

croganm•2y ago

Well you could just use 2 selectors seperated with a comma to apply the rule to the same. To select all the 2,4,6,8,... :nth-child(even) To select 3,7,11,15,... :nth-child(4n+3) So, say we're targeting a p element

p:nth-child(even), p:nth-child(4n+3){
background:red;
}

p:nth-child(even), p:nth-child(4n+3){
background:red;
}

At least I think, I'm on mobile so it's just theory. Haven't tested it out

Wouter Schaap•2y ago

Isn't it just

p:not(:nth-child(4n+1))

p:not(:nth-child(4n+1))

croganm•2y ago

Yea, that absolutely works as well! :not selector has better support than I thought 🙂

Gashy•2y ago

Also in the future/soon we are going to have the introduction of the of nth selectors as well, so that will bring in another possible solution https://developer.mozilla.org/en-US/docs/Web/CSS/:nth-child#using_of_selector

:nth-child() - CSS: Cascading Style Sheets | MDN

The :nth-child() CSS pseudo-class matches elements based on their position among a group of siblings.

Gaming

Programming

Tricky nth-child