Checklist: CSS only [duplicate]

Question

Checklist: CSS only [duplicate]

Navigation

#1 by (4 votes)

3

I have a list of 2 items per line and I need each item to be one color. However, the item below must be different than the item above.

Here's the image of what I need:

I'm not able to make this color change in the items, it follows what I have developed:

In a rough way, I need the third image to be white rather than blue and the fourth blue and so on.

Follow the CSS code I've 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;
                }
            }
        }
    }
}

html css

asked by anonymous 23.10.2017 / 11:47

1 answer

Feed Hidden Field via JQuery Error executing delete on Sqlite bank

score 4 · Accepted Answer

What you're doing is selecting 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 to 2 elements.

To do this, use the following setting 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: link