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: </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: </b>Gabriel Marinho</p>
</div>
<div class="col-100 tablet-40 desktop-50 card-content-padding">
<p class="truncar"><b class="sumir-agora">Assunto: </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: </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> - <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> - <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> - <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: </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: </b>Gabriel Marinho</p>
</div>
<div class="col-100 tablet-40 desktop-50 card-content-padding">
<p class="truncar"><b class="sumir-agora">Assunto: </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: </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> - <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> - <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> - <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> - <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> - <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> - <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};