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

Question

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?

Answer 1

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>