Hello, I want to get the following result with css:
I know that with :nth-child: odd and :nth-child: even select odd and even, but the way I want it would look something like this:
No, yes, yes, no, no, yes, yes ...
Practically taking the first one, then I would skip the elements by 2 by 2, how do I get with nth-child ?
Note: The image is only to illustrate the selection sequence.
nth-child() supports the definition of cyclic patterns using the notation an+x , where a is the size of the cycle and x is the index of the position of the element to select within the cycle.
In the question image you have cycles of 4 squares, with squares 2 and 3 being black. Here is an 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 was obtained in this English OS response .