CODEWITHSUNDEEP
css
DNa
DNa

Reputation: 67

CSS select every 1 3 4 6 nth child

I have divs that are shown in a grid 3 x n.

What I'm looking to do is to select the 1st, 3rd of every row. Or a clearer example: 1 3, 4 6, 7 9, 10 12. Basically skipping the middle div in the grid.

I tried, but it breaks right after. I can't seem to find CSS selectors for more than 2 instances like I want.

.project:nth-child(1), .project:nth-child(2n+1) {
 //something
}

Upvotes: 0

Views: 607

Answers (1)

Yogen Darji
Yogen Darji

Reputation: 3300

You can use 3n and 3n + 1 for every 1st, 3rd of every row.

.project:nth-child(3n),
.project:nth-child(3n+1) {
  color: red;
}

.wrapper {
  display: grid;
  grid-auto-flow: row;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, 1fr);
}
<div class="wrapper">
  <div class="project">1</div>
  <div class="project">2</div>
  <div class="project">3</div>
  <div class="project">4</div>
  <div class="project">5</div>
  <div class="project">6</div>
  <div class="project">7</div>
  <div class="project">8</div>
  <div class="project">9</div>
  <div class="project">10</div>
  <div class="project">11</div>
  <div class="project">12</div>
</div>

Upvotes: 1

Related Questions