Checklist: with CSS only

Question

I have a list with 2 items per line and I need each item to be of one color. However, the bottom item has to be different than the top item.

Follow the image of what I need:

I am unable to make this color change in the items, follows what I have developed:

Roughly, I need the third image to be white and not blue and the fourth blue and so continue the change.

Follows CSS code of what I have developed:

.lista_servicos{
    margin-top: 100px;
    li{
        margin-bottom: 50px;
        .box{
            padding: 50px;
            box-shadow: 15px 25.981px 60px 0px rgba(23, 20, 15, 0.2);
            .imagem{
                margin-bottom: 50px;
            }
            .nome_servico{
                font-family: $fonte;
                font-size: 28px;
                font-weight: 600;
                margin-bottom: 35px;
                min-height: 40px;
                img{
                    margin-top: -3px;
                    margin-right: 15px;
                }
            }
            .descricao{
                padding: 0px;
                margin-bottom: 50px;
                min-height: 190px;
                *{
                    text-align: center;
                }
            }
        }
        &:nth-of-type(odd){
            .box{
                background: $primaria;
                .imagem{
                    img{
                        filter: grayscale(100%) brightness(10);
                    }
                }
                .nome_servico{
                    color: $branco;
                }
                .descricao{
                    *{
                        color: $branco;
                    }
                }
                .botao{
                    @extend .transparente;
                }
            }
        }
        &:nth-of-type(even){
            .box{
                background: $branco;
                .nome_servico{
                    color: $primaria;
                }
                .descricao{
                    *{
                        color: $primaria;
                    }
                }
                .botao{
                    @extend .transparente_azul_escuro;
                }
            }
        }
    }
}

Answer 1

What you are doing is selecting the odd and even items (Odd and Even) with the code nth-of-type(). What you should do is provide the "calculation" to select from 2 in 2 elements.

For this, use the following configuration of nth:

li:nth-child(4n+1), li:nth-child(4n) {
    background: $primaria;
}

li:nth-child(4n-1), li:nth-child(4n-2) {
    background: $branco;
}

See this example working: http://jsfiddle.net/vbc6vj61/