CSS apply style to all child except if multiple of x-CodePudding

I want to apply style of to box but not which is a multiple of 3 (box 3, 6, 9, 12.... should not be styled)

Or else how do I do it the other way around. Styling only box which is multiple of 3 (box 3, 6, 9, 12.... should only be styled)

The snippet below only works for the first x box.

.box {
  display: inline-block;
  background-color: #ffff00;
  height: 60px;
  width: 60px;
}
.box:not(:nth-child(3)) {
   background-color: #ff0000;
}

<div >
  <div ></div>
  <div ></div>
  <div ></div>
  <div ></div>
  <div ></div>
  <div ></div>
  <div ></div>
  <div ></div>
  <div ></div>
  <div ></div>
  <div ></div>

</div>

CodePudding user response：

Use :nth-child(3n)

.box {
  display: inline-block;
  background-color: #ffff00;
  height: 60px;
  width: 60px;
}
.box:not(:nth-child(3n)) {
   background-color: #ff0000;
}

<div >
  <div ></div>
  <div ></div>
  <div ></div>
  <div ></div>
  <div ></div>
  <div ></div>
  <div ></div>
  <div ></div>
  <div ></div>
  <div ></div>
  <div ></div>

</div>