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 class="ctr">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>>Solution :
Use :nth-child(3n)
.box {
display: inline-block;
background-color: #ffff00;
height: 60px;
width: 60px;
}
.box:not(:nth-child(3n)) {
background-color: #ff0000;
}<div class="ctr">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>