CSS: nth-child (even) - Problems

2

Hello. I'm developing a program and on a page I had to use "col" to do a layout similar to the "tables". I can not use tables because the line needs to expand down when I click on a certain button. But I need to switch colors from one line to another, table pattern (White / gray / white ...)

I tried using css: nth-child (even), both by class and by id, in none of the ways I had the expected result. Any ideas?

<div class="page" data-name="mensagens">
<div class="navbar">
    <div class="navbar-inner cor-padrao">
        <div class="left sumir">
            <a href="#" class="link back"> <i class="icon icon-back"></i> </a>
        </div>
        <div class="title">
            <h3>Mensagens</h3>
        </div>
    </div>
</div>
<div class="page-content">
    <div class="row linha-botao">
        <div class="col-100 tablet-100 desktop-100">
            <div class="card">
                <div class="card-header">
                    <h1>Últimas Mensagens (3)</h1>
                </div>
                <div class="card-content">
                    <div class="accordion-item alterna">
                        <div class="row">
                            <div class="col-100 tablet-20 desktop-20 card-content-padding">
                                <p><b class="sumir-agora">Data:&ensp;</b>15/05/2018</p>
                            </div>
                            <div class="col-100 tablet-20 desktop-20 card-content-padding">
                                <p class="truncar"><b class="sumir-agora">Remetente:&ensp;</b>Gabriel Marinho</p>
                            </div>
                            <div class="col-100 tablet-40 desktop-50 card-content-padding">
                                <p class="truncar"><b class="sumir-agora">Assunto:&ensp;</b>Alterar as fotos do Barra Eye Clinic e Facebook</p>
                            </div>
                            <div class="col-100 tablet-20 desktop-10 card-content-padding coluna-acao accordion-item-toggle">
                                <b class="sumir-agora">Ações:&ensp;</b>
                                <a href="#" class="link popup-open" data-popup=".popup-services"><i class="material-icons dots">reply</i></a>
                                <a href="#" class="link"><i class="material-icons dots green">check</i></a>
                            </div>
                            <div class="col-100 tablet-100 desktop-100 accordion-item-content">
                                <div class="row block" style="background-color: #ececec; padding: 20px;">
                                    <div class="col-100 tablet-100 desktop-100">
                                        <h2 style="font-size: 24px; margin: 0px">Correção Site Aramil (Fotos e Textos)</h2>
                                        <p style="font-size: 13px; margin: 0px"><b>João Carlos</b>&nbsp;-&nbsp;<b>15/05/2018</b></p>
                                        <p style="font-size: 16px">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur non tortor non mauris ornare ultrices. Etiam fermentum sem a euismod tempor. Pellentesque placerat a augue sed congue. </p>
                                        <hr>
                                        <p style="font-size: 13px; margin: 0px"><b>Resposta</b>&nbsp;-&nbsp;<b>16/05/2018</b></p>
                                        <p style="font-size: 16px">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur non tortor non mauris ornare ultrices. Etiam fermentum sem a euismod tempor. Pellentesque placerat a augue sed congue. </p>
                                        <hr>
                                        <p style="font-size: 13px; margin: 0px"><b>João Carlos</b>&nbsp;-&nbsp;<b>18/05/2018</b></p>
                                        <p style="font-size: 16px">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur non tortor non mauris ornare ultrices. Etiam fermentum sem a euismod tempor. Pellentesque placerat a augue sed congue. </p>
                                        <div class="list no-hairlines-md" style="margin: 0px">
                                            <ul>
                                                <li class="item-content item-input">
                                                    <div class="item-inner">
                                                        <div class="item-title item-floating-label">Responder</div>
                                                        <div class="item-input-wrap">
                                                            <textarea class="resizable" placeholder="Responda aqui..."></textarea>
                                                            <span class="input-clear-button"></span>
                                                        </div>
                                                    </div>
                                                </li>
                                            </ul>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <hr>
                    <div class="accordion-item alterna">
                        <div class="row">
                            <div class="col-100 tablet-20 desktop-20 card-content-padding">
                                <p><b class="sumir-agora">Data:&ensp;</b>15/05/2018</p>
                            </div>
                            <div class="col-100 tablet-20 desktop-20 card-content-padding">
                                <p class="truncar"><b class="sumir-agora">Remetente:&ensp;</b>Gabriel Marinho</p>
                            </div>
                            <div class="col-100 tablet-40 desktop-50 card-content-padding">
                                <p class="truncar"><b class="sumir-agora">Assunto:&ensp;</b>Alterar as fotos do Barra Eye Clinic e Facebook</p>
                            </div>
                            <div class="col-100 tablet-20 desktop-10 card-content-padding coluna-acao accordion-item-toggle">
                                <b class="sumir-agora">Ações:&ensp;</b>
                                <a href="#" class="link popup-open" data-popup=".popup-services"><i class="material-icons dots">reply</i></a>
                                <a href="#" class="link"><i class="material-icons dots green">check</i></a>
                            </div>
                            <div class="col-100 tablet-100 desktop-100 accordion-item-content">
                                <div class="row block" style="background-color: #ececec; padding: 20px;">
                                    <div class="col-100 tablet-100 desktop-100">
                                        <h2 style="font-size: 24px; margin: 0px">Correção Site Aramil (Fotos e Textos)</h2>
                                        <p style="font-size: 13px; margin: 0px"><b>João Carlos</b>&nbsp;-&nbsp;<b>15/05/2018</b></p>
                                        <p style="font-size: 16px">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur non tortor non mauris ornare ultrices. Etiam fermentum sem a euismod tempor. Pellentesque placerat a augue sed congue. </p>
                                        <hr>
                                        <p style="font-size: 13px; margin: 0px"><b>Resposta</b>&nbsp;-&nbsp;<b>16/05/2018</b></p>
                                        <p style="font-size: 16px">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur non tortor non mauris ornare ultrices. Etiam fermentum sem a euismod tempor. Pellentesque placerat a augue sed congue. </p>
                                        <hr>
                                        <p style="font-size: 13px; margin: 0px"><b>João Carlos</b>&nbsp;-&nbsp;<b>18/05/2018</b></p>
                                        <p style="font-size: 16px">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur non tortor non mauris ornare ultrices. Etiam fermentum sem a euismod tempor. Pellentesque placerat a augue sed congue. </p>
                                        <div class="list no-hairlines-md" style="margin: 0px">
                                            <ul>
                                                <li class="item-content item-input">
                                                    <div class="item-inner">
                                                        <div class="item-title item-floating-label">Responder</div>
                                                        <div class="item-input-wrap">
                                                            <textarea class="resizable" placeholder="Responda aqui..."></textarea>
                                                            <span class="input-clear-button"></span>
                                                        </div>
                                                    </div>
                                                </li>
                                            </ul>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="popup popup-services">
        <div class="view popup-view">
            <div class="page">
                <div class="navbar">
                    <div class="navbar-inner" style="padding-left: 20px">
                        <div>
                            <h2>Responder</h2>
                        </div>
                        <div class="right">
                            <a href="#" class="link">15/05/2018</a>
                        </div>
                    </div>
                </div>
                <div class="page-content block">
                    <h2 style="font-size: 24px; margin: 0px">Correção Site Aramil (Fotos e Textos)</h2>
                    <p style="font-size: 13px; margin: 0px"><b>João Carlos</b>&nbsp;-&nbsp;<b>15/05/2018</b></p>
                    <p style="font-size: 16px">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur non tortor non mauris ornare ultrices. Etiam fermentum sem a euismod tempor. Pellentesque placerat a augue sed congue. </p>
                    <hr>
                    <p style="font-size: 13px; margin: 0px"><b>Resposta</b>&nbsp;-&nbsp;<b>16/05/2018</b></p>
                    <p style="font-size: 16px">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur non tortor non mauris ornare ultrices. Etiam fermentum sem a euismod tempor. Pellentesque placerat a augue sed congue. </p>
                    <hr>
                    <p style="font-size: 13px; margin: 0px"><b>João Carlos</b>&nbsp;-&nbsp;<b>15/05/2018</b></p>
                    <p style="font-size: 16px">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur non tortor non mauris ornare ultrices. Etiam fermentum sem a euismod tempor. Pellentesque placerat a augue sed congue. </p>
                    <div class="list no-hairlines-md" style="margin: 0px">
                        <ul>
                            <li class="item-content item-input">
                                <div class="item-inner">
                                    <div class="item-title item-floating-label">Responder</div>
                                    <div class="item-input-wrap">
                                        <textarea class="resizable" placeholder="Responda aqui..."></textarea>
                                        <span class="input-clear-button"></span>
                                    </div>
                                </div>
                            </li>
                        </ul>
                    </div>
                    <div class="row"></div>
                    <div class="espaco-vazio"></div>
                </div>
            </div>
        </div>
    </div>
</div>

I do not understand why it is not working. The divs I want the background to be colored are with the alternate class. And in CSS it's like

div .alterna:nth-child(even) {background-colr:red !important};
    
asked by anonymous 17.09.2018 / 14:17