Nth-Child selection in a table with even columns

Question

Hello I want to get the following result with css:

I know with :nth-child: odd and :nth-child: even selects the odd and odd pairs, but in the way I want it would be something like this:

No, yes, yes, no, no, yes, yes...

Practically taking out the first one, then skipping 2-2 the elements, as with you with nth-child ?

Note: The image is just to illustrate the selection sequence.

Answer 1

The nth-child() supports the definition of cyclic patterns using notation an+x, where a is the cycle size and x is the index of the position of the element to be selected within the cycle.

In the image of the question you have 4 square cycles, and quads 2 and 3 must be black. Follow example.

/* resposta em si */
.quadrados div:nth-child(4n+2),
.quadrados div:nth-child(4n+3){
 background-color: black;
}

/* montando o "tabuleiro" */
.quadrados {
 display: flex;
 max-width: 220px;
 flex-flow: row wrap;
}
.quadrados div {
 border: 4px solid black;
 width: 100px;
 height: 100px;
}

<div class="quadrados">
 <div></div><div></div>
 <div></div><div></div>
 <div></div><div></div>
 <div></div><div></div>
</div>

The solution has been obtained in this English OS response.