CODEWITHSUNDEEP
csscss-selectors
Nayt Grochowski
Nayt Grochowski

Reputation: 591

css nth-child, every 3rd + 1, ie: 4, 7, 10, 13, etc

I have been trying to figure this out, but no success - for now have this as a placeholder that works, but it's fugly...

.customField:nth-child(4), 
.customField:nth-child(7), 
.customField:nth-child(10), 
.customField:nth-child(13), 
.customField:nth-child(16) {
  clear: both;
}

How get I get this to on nth-child statement?

Upvotes: 8

Views: 12275

Answers (2)

j08691
j08691

Reputation: 207901

I believe :nth-child(3n+4) would work.

The general format is :nth-child(an+b) for a given value of n where n is a positive number or zero.

Upvotes: 4

Michael Coker
Michael Coker

Reputation: 53674

Every 3rd child is 3n but to start on the 4th one, use 4 as an offset.

div:nth-child(3n + 4) {
  color: red;
}
<div>asdf</div>
<div>asdf</div>
<div>asdf</div>
<div>asdf</div>
<div>asdf</div>
<div>asdf</div>
<div>asdf</div>
<div>asdf</div>
<div>asdf</div>
<div>asdf</div>
<div>asdf</div>
<div>asdf</div>
<div>asdf</div>
<div>asdf</div>
<div>asdf</div>
<div>asdf</div>
<div>asdf</div>
<div>asdf</div>
<div>asdf</div>
<div>asdf</div>
<div>asdf</div>
<div>asdf</div>

Upvotes: 16

Related Questions