2

Olá. Estou desenvolvendo um programa e em uma página tive que usar "col" para fazer um layout parecido com as "tables". Não posso usar "tables" pois a linha precisa expandir para baixo quando clicar em certo botão. Porém preciso alternar as cores de uma linha pra outra, padrão da table (Tipo branco / cinza / branco...)

Tentei usar o css :nth-child(even), tanto por classe como por id, em nenhuma das formas tive o resultado esperado. Alguma ideia?

<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>

inserir a descrição da imagem aqui

Não entendo por que não está funcionando. As divs que quero que o fundo seja colorido estão com a classe alterna. E no CSS está como

div .alterna:nth-child(even) {background-colr:red !important};

1 Resposta 1

2

Cara o seu problema é pq tem uma tag <hr> entre um bloco de conteúdo e outro, dessa forma ele "quebra" a ordenação do seu nth-child.

Para corrigir isso troque nth-child por nth-of-type ai ele só peque os elementos com a mesma classe e ignora as outras tags que existem entre um e outro entende. Veja mais detalhes nessa resposta que tem um bos exemplo da diferença entre esses dois tipos Qual a diferença entre o :nth-child e o :nth-of-type?

Aqui tem o conceito aplicado no seu código:

.card-content .alterna:nth-of-type(odd) { 
    background-color: #f00;
}
    <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=" 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=" 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 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=" 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 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=" 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>

2
  • mais uma vez me salvando! Muito obrigado amigo. Funcionou perfeitamente, não sabia que existia essa classe, espero que isso também ajude outros. Commented 17/09/2018 às 12:47
  • @GabrielMarinho tranquilo meu jovem que bom que resolveu, esse tipo de problema acontece, por isso tem essas variações de irmão direto ou irmão com outros elementos entre eles. Mesmo pessoas experientes as vezes se confundem com isso... Eu mesmo só caiu a ficha quando testei e vi que não deu certo, ai me liguei no HR entre os blocos e resolvi com o nth-of-type
    – hugocsl
    Commented 17/09/2018 às 12:49

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .