How to get this nth-child()

September 28, 2022

How can we use nth-child() to have the following style, where the first column has no style, the second transform: translateY(20px), the third transform: translateY(40px) and the third transform: translateY(60px).

There is no div column, all the cards are displayed and arranged using flex.

.wrapper{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  height: 100vh;
  
}

.card{
  height: 50px;
  width: 20%;
  background: teal;
  margin: 10px;
}

.card:nth-child(2n){
  transform: translateY(20px);
}
.card:nth-child(3n){
  transform: translateY(40px);
}
.card:nth-child(4n){
  transform: translateY(60px);
}

<div class="wrapper">

<div class="card">1</div>
<div class="card">2 - translateY(20px)</div>
<div class="card">3 - translateY(40px)</div>
<div class="card">4 - translateY(60px)</div>
<div class="card">5</div>
<div class="card">6 - translateY(20px)</div>
<div class="card">7 - translateY(40px)</div>
<div class="card">8 - translateY(60px)</div>
<div class="card">9</div>
<div class="card">10 - translateY(20px)</div>
<div class="card">11 - translateY(40px)</div>
<div class="card">12 - translateY(60px)</div>

</div>

>Solution :

The problem is that for the sixth element the .card:nth-child(3n) selector overrides the .card:nth-child(2n) selector because 6 is dividable by 2 and 3. The same happens for 8 and 12.

Instead you can use 4n for every selector and add the offset for each column.

.wrapper{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  height: 100vh;
  
}

.card{
  height: 50px;
  width: 20%;
  background: teal;
  margin: 10px;
}
 
.card:nth-child(4n + 2){
  transform: translateY(20px);
}
.card:nth-child(4n + 3){
  transform: translateY(40px);
}
   .card:nth-child(4n + 4){
  transform: translateY(60px);

<div class="wrapper">

<div class="card">1</div>
<div class="card">2 - translateY(20px)</div>
<div class="card">3 - translateY(40px)</div>
<div class="card">4 - translateY(60px)</div>
<div class="card">5</div>
<div class="card">6 - translateY(20px)</div>
<div class="card">7 - translateY(40px)</div>
<div class="card">8 - translateY(60px)</div>
<div class="card">9</div>
<div class="card">10 - translateY(20px)</div>
<div class="card">11 - translateY(40px)</div>
<div class="card">12 - translateY(60px)</div>

</div>