How can I select odd elements in odd flex rows with wrapping?

Issue

I was trying to solve a CSS battle.

As you can see odd elements in odd rows and even elements in even rows are orange. How can I do that without manually selecting elements like this:

div:nth-of-type(1),
div:nth-of-type(3n),
div:nth-of-type(8),
div:nth-of-type(11) {
  background: #F09462;
}

Here is my solution, but on bigger amount of elements it wouldn't work.

body {
  margin: 10px;
  background: #5C434C;
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

div:nth-of-type(1),
div:nth-of-type(3n),
div:nth-of-type(8),
div:nth-of-type(11) {
  background: #F09462;
}

div,
div:last-of-type {
  width: 80px;
  height: 80px;
  background: #F5D6B4;
  border-radius: 100px 0 0;
}

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

Could I possibly do that without using separate divs for rows, grid or classes for divs?

Solution

Do methods in this post help? Pure CSS Chessboard

Adapting to this case, the selectors will be

  div:nth-child(8n+1),
  div:nth-child(8n+3),
  div:nth-child(8n+6),
  div:nth-child(8n+8) {
    background: #F09462;
  }

This is scalable even if you add more rows. For each 2 columns added, you have to add another line of selectors using the same logic.

Answered By - alph