CODEWITHSUNDEEP
htmlcss
Ibrahim Ali
Ibrahim Ali

Reputation: 2503

CSS apply style to all child except if multiple of x

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>

Upvotes: 0

Views: 35

Answers (1)

porcelainsnake
porcelainsnake

Reputation: 153

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>

Upvotes: 2

Related Questions