-1

Meu código HTML possui 12 tags que formam 4 blocos de conteúdo por linha, gostaria de aplicar um estilo diferente da seguinte forma com nth-child:

1 div - um estilo CSS Próximas 3 divs - outro estilo CSS

E assim repetir 1 e 3, 1 e 3, 1 e 3, fiz de um jeito mas responde até a quarta div, na quinta, que seria a 1 da segunda linha, ele já não se aplica.

<style>
.tab-content .item-wrap {
    float: left;
    width: 25%;
    padding-left: 0px;
    padding-right: 0px;
    margin-top: 10px;
    margin-bottom: 40px;
    position: relative;
}


.tab-content .item-wrap:nth-child(n+1) {
    padding-left: 20px;
}
</style>

E o HTML:

<div class="container">

    <div class="category-adds" style="position: relative; overflow: visible; z-index: 1;">

        <div id="category-tab">

            <div class="tab-view">
                <ul class="list-inline">
                    <li class="grid-view-tab shadow-ads"><i class="fa fa-th-large" aria-hidden="true"></i></li>
                    <li class="small-view-tab active shadow-ads"><i class="fa fa-th" aria-hidden="true"></i></li>
                    <li class="list-view-tab shadow-ads"><i class="fa fa-th-list" aria-hidden="true"></i></li>
                </ul>
            </div>

            <div class="category-tab">

                <ul class="nav nav-tabs" role="tablist">
                    <li role="presentation" class="active"><a style="border-radius: 0px !important;" class="shadow-ads" href="#recent" aria-controls="recent" role="tab" data-toggle="tab">Destaques</a></li>
                    <li role="presentation"><a style="border-radius: 0px !important;" class="shadow-ads" href="#Random" aria-controls="Random" role="tab" data-toggle="tab">Outros destaques</a></li>
                </ul>

                <div class="tab-content small-view-tab">

                    <div role="tabpanel" class="tab-pane active" id="recent">                       
                        <div class="item-wrap image-wrap-corner-2" style="padding-left: 0px;">
                            <img class="corner" src="assets/images/premium-corner.png">
                            <div class="item shadow-ads">
                                <div class="item-image">
                                    <a href="#"><img src="assets/images/item/1.jpg" alt="" class="img-responsive img-thumbnail"></a>
                                    <div class="item-price">
                                        <span>R$3950</span>
                                    </div> 
                                </div>
                                <div class="item-description">
                                    <div class="item-title">
                                        <h3><a href="#">Diecast Model Motorcycle</a></h3>
                                    </div>
                                    <div class="item-info">
                                        <p>Duis autem vel eum iriure dolor in hendrerit in vulputate velit.</p>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="item-wrap image-wrap-corner-2">
                            <img class="corner" src="assets/images/premium-corner.png">
                            <div class="item shadow-ads">
                                <div class="item-image">
                                    <a href="#"><img src="assets/images/item/12.jpg" alt="" class="img-responsive img-thumbnail"></a>
                                        <div class="item-price">
                                            <span>R$3950</span>
                                        </div> 
                                </div>
                            <div class="item-description">
                                <div class="item-title">
                                    <h3><a href="#">Diecast Model Motorcycle</a></h3>
                                </div>
                                <div class="item-info">
                                    <p>Duis autem vel eum iriure dolor in hendrerit in vulputate velit.</p>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="item-wrap image-wrap-corner-2">
                        <img class="corner" src="assets/images/premium-corner.png">
                        <div class="item shadow-ads">
                            <div class="item-image">
                                <a href="#"><img src="assets/images/item/4.jpg" alt="" class="img-responsive img-thumbnail"></a>
                                    <div class="item-price">
                                        <span>R$19</span>
                                    </div> 
                            </div>
                            <div class="item-description">
                                <div class="item-title">
                                    <h3><a href="#">Disital Multi Headphone</a></h3>
                                </div>
                                <div class="item-info">
                                    <p>Duis autem vel eum iriure dolor in hendrerit in vulputate velit.</p>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="item-wrap image-wrap-corner-2" style="padding-right: 0px;">
                        <img class="corner" src="assets/images/premium-corner.png">
                        <div class="item shadow-ads">
                            <div class="item-image">
                                <a href="#"><img src="assets/images/item/12.jpg" alt="" class="img-responsive img-thumbnail"></a>
                                <div class="item-price">
                                    <span>R$3950</span>
                                </div> 
                            </div>
                            <div class="item-description">
                                <div class="item-title">
                                    <h3><a href="#">Diecast Model Motorcycle</a></h3>
                                </div>
                                <div class="item-info">
                                    <p>Duis autem vel eum iriure dolor in hendrerit in vulputate velit.</p>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="item-wrap image-wrap-corner-2" style="padding-left: 0px;">
                        <img class="corner" src="assets/images/premium-corner.png">
                        <div class="item shadow-ads">
                            <div class="item-image">
                                <a href="#"><img src="assets/images/item/1.jpg" alt="" class="img-responsive img-thumbnail"></a>
                                <div class="item-price">
                                    <span>R$3950</span>
                                </div> 
                            </div>
                            <div class="item-description">
                                <div class="item-title">
                                    <h3><a href="#">Diecast Model Motorcycle</a></h3>
                                </div>
                                <div class="item-info">
                                    <p>Duis autem vel eum iriure dolor in hendrerit in vulputate velit.</p>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="item-wrap image-wrap-corner-2" style="padding-right: 0px;">
                        <img class="corner" src="assets/images/premium-corner.png">
                        <div class="item shadow-ads">
                            <div class="item-image">
                                <a href="#"><img src="assets/images/item/12.jpg" alt="" class="img-responsive img-thumbnail"></a>
                                <div class="item-price">
                                    <span>R$3950</span>
                                </div> 
                            </div>
                            <div class="item-description">
                                <div class="item-title">
                                    <h3><a href="#">Diecast Model Motorcycle</a></h3>
                                </div>
                                <div class="item-info">
                                    <p>Duis autem vel eum iriure dolor in hendrerit in vulputate velit.</p>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="item-wrap image-wrap-corner-2" style="padding-right: 0px;">
                        <img class="corner" src="assets/images/premium-corner.png">
                        <div class="item shadow-ads">
                            <div class="item-image">
                                <a href="#"><img src="assets/images/item/12.jpg" alt="" class="img-responsive img-thumbnail"></a>
                                <div class="item-price">
                                    <span>R$3950</span>
                                </div> 
                            </div>
                            <div class="item-description">
                                <div class="item-title">
                                    <h3><a href="#">Diecast Model Motorcycle</a></h3>
                                </div>
                                <div class="item-info">
                                    <p>Duis autem vel eum iriure dolor in hendrerit in vulputate velit.</p>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="item-wrap image-wrap-corner-2" style="padding-right: 0px;">
                        <img class="corner" src="assets/images/premium-corner.png">
                        <div class="item shadow-ads">
                            <div class="item-image">
                                <a href="#"><img src="assets/images/item/12.jpg" alt="" class="img-responsive img-thumbnail"></a>
                                <div class="item-price">
                                    <span>R$3950</span>
                                </div> 
                            </div>
                            <div class="item-description">
                                <div class="item-title">
                                    <h3><a href="#">Diecast Model Motorcycle</a></h3>
                                </div>
                                <div class="item-info">
                                    <p>Duis autem vel eum iriure dolor in hendrerit in vulputate velit.</p>
                                </div>
                            </div>
                        </div>
                    </div>

                </div>

            </div>

        </div>
    </div>  
</div>

O motivo de utilizar o :nth-child é que nos blocos da primeira coluna a div deve estar colada na DIV pai, e as demais com padding pada separar uma da outra, pois uso o BOOTSTRAP 3 para trabalhar com a estrutura HTMLe CSS, então dividi o container com 4 colunas por linha (col-xs-12 col-sm-12 col-md-4 col-lg-4).

Na amostra abaixo segue parte da disposição dos blocos de conteúdo, e como gostaria que ficassem:

inserir a descrição da imagem aqui

7

1 Resposta 1

1

Vc precisa fazer uma regra no nth-child para pegar de 4 em 4.

nth-child(4n + 1)

Vc pode ler mais sobre isso nessa excelente resposta: O que significam o "n", números e sinais nos seletores "nth-child" ou "nth-last-child"?

Já o padding como vai ser igual em todos os filho basta vc colocar direto na classe: .tab-content .item-wrap { padding... }

Segue o exemplo trocando a cor do texto e mantendo o padding que vc precisa.

    .tab-content .item-wrap {
    float: left;
    width: 25%;
    padding-left: 20px;
    padding-right: 20px;
    margin-top: 10px;
    margin-bottom: 40px;
    position: relative;
}


.tab-content .item-wrap:nth-child(4n + 1) {
    padding-left: 20px;
    color: red;
}
    <link rel="stylesheet" type="text/css" media="screen" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />



        <div class="container">

                <div class="category-adds" style="position: relative; overflow: visible; z-index: 1;">
            
                    <div id="category-tab">
            
                        <div class="tab-view">
                            <ul class="list-inline">
                                <li class="grid-view-tab shadow-ads"><i class="fa fa-th-large" aria-hidden="true"></i></li>
                                <li class="small-view-tab active shadow-ads"><i class="fa fa-th" aria-hidden="true"></i></li>
                                <li class="list-view-tab shadow-ads"><i class="fa fa-th-list" aria-hidden="true"></i></li>
                            </ul>
                        </div>
            
                        <div class="category-tab">
            
                            <ul class="nav nav-tabs" role="tablist">
                                <li role="presentation" class="active"><a style="border-radius: 0px !important;" class="shadow-ads" href="#recent" aria-controls="recent" role="tab" data-toggle="tab">Destaques</a></li>
                                <li role="presentation"><a style="border-radius: 0px !important;" class="shadow-ads" href="#Random" aria-controls="Random" role="tab" data-toggle="tab">Outros destaques</a></li>
                            </ul>
            
                            <div class="tab-content small-view-tab">
            
                                <div role="tabpanel" class="tab-pane active" id="recent">                       
                                    <div class="item-wrap image-wrap-corner-2" style="padding-left: 0px;">
                                        <img class="corner" src="assets/images/premium-corner.png">
                                        <div class="item shadow-ads">
                                            <div class="item-image">
                                                <a href="#"><img src="assets/images/item/1.jpg" alt="" class="img-responsive img-thumbnail"></a>
                                                <div class="item-price">
                                                    <span>R$3950</span>
                                                </div> 
                                            </div>
                                            <div class="item-description">
                                                <div class="item-title">
                                                    <h3><a href="#">Diecast Model Motorcycle</a></h3>
                                                </div>
                                                <div class="item-info">
                                                    <p>Duis autem vel eum iriure dolor in hendrerit in vulputate velit.</p>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
            
                                    <div class="item-wrap image-wrap-corner-2">
                                        <img class="corner" src="assets/images/premium-corner.png">
                                        <div class="item shadow-ads">
                                            <div class="item-image">
                                                <a href="#"><img src="assets/images/item/12.jpg" alt="" class="img-responsive img-thumbnail"></a>
                                                    <div class="item-price">
                                                        <span>R$3950</span>
                                                    </div> 
                                            </div>
                                        <div class="item-description">
                                            <div class="item-title">
                                                <h3><a href="#">Diecast Model Motorcycle</a></h3>
                                            </div>
                                            <div class="item-info">
                                                <p>Duis autem vel eum iriure dolor in hendrerit in vulputate velit.</p>
                                            </div>
                                        </div>
                                    </div>
                                </div>
            
                                <div class="item-wrap image-wrap-corner-2">
                                    <img class="corner" src="assets/images/premium-corner.png">
                                    <div class="item shadow-ads">
                                        <div class="item-image">
                                            <a href="#"><img src="assets/images/item/4.jpg" alt="" class="img-responsive img-thumbnail"></a>
                                                <div class="item-price">
                                                    <span>R$19</span>
                                                </div> 
                                        </div>
                                        <div class="item-description">
                                            <div class="item-title">
                                                <h3><a href="#">Disital Multi Headphone</a></h3>
                                            </div>
                                            <div class="item-info">
                                                <p>Duis autem vel eum iriure dolor in hendrerit in vulputate velit.</p>
                                            </div>
                                        </div>
                                    </div>
                                </div>
            
                                <div class="item-wrap image-wrap-corner-2" style="padding-right: 0px;">
                                    <img class="corner" src="assets/images/premium-corner.png">
                                    <div class="item shadow-ads">
                                        <div class="item-image">
                                            <a href="#"><img src="assets/images/item/12.jpg" alt="" class="img-responsive img-thumbnail"></a>
                                            <div class="item-price">
                                                <span>R$3950</span>
                                            </div> 
                                        </div>
                                        <div class="item-description">
                                            <div class="item-title">
                                                <h3><a href="#">Diecast Model Motorcycle</a></h3>
                                            </div>
                                            <div class="item-info">
                                                <p>Duis autem vel eum iriure dolor in hendrerit in vulputate velit.</p>
                                            </div>
                                        </div>
                                    </div>
                                </div>
            
                                <div class="item-wrap image-wrap-corner-2" style="padding-left: 0px;">
                                    <img class="corner" src="assets/images/premium-corner.png">
                                    <div class="item shadow-ads">
                                        <div class="item-image">
                                            <a href="#"><img src="assets/images/item/1.jpg" alt="" class="img-responsive img-thumbnail"></a>
                                            <div class="item-price">
                                                <span>R$3950</span>
                                            </div> 
                                        </div>
                                        <div class="item-description">
                                            <div class="item-title">
                                                <h3><a href="#">Diecast Model Motorcycle</a></h3>
                                            </div>
                                            <div class="item-info">
                                                <p>Duis autem vel eum iriure dolor in hendrerit in vulputate velit.</p>
                                            </div>
                                        </div>
                                    </div>
                                </div>
            
                                <div class="item-wrap image-wrap-corner-2" style="padding-right: 0px;">
                                    <img class="corner" src="assets/images/premium-corner.png">
                                    <div class="item shadow-ads">
                                        <div class="item-image">
                                            <a href="#"><img src="assets/images/item/12.jpg" alt="" class="img-responsive img-thumbnail"></a>
                                            <div class="item-price">
                                                <span>R$3950</span>
                                            </div> 
                                        </div>
                                        <div class="item-description">
                                            <div class="item-title">
                                                <h3><a href="#">Diecast Model Motorcycle</a></h3>
                                            </div>
                                            <div class="item-info">
                                                <p>Duis autem vel eum iriure dolor in hendrerit in vulputate velit.</p>
                                            </div>
                                        </div>
                                    </div>
                                </div>
            
                                <div class="item-wrap image-wrap-corner-2" style="padding-right: 0px;">
                                    <img class="corner" src="assets/images/premium-corner.png">
                                    <div class="item shadow-ads">
                                        <div class="item-image">
                                            <a href="#"><img src="assets/images/item/12.jpg" alt="" class="img-responsive img-thumbnail"></a>
                                            <div class="item-price">
                                                <span>R$3950</span>
                                            </div> 
                                        </div>
                                        <div class="item-description">
                                            <div class="item-title">
                                                <h3><a href="#">Diecast Model Motorcycle</a></h3>
                                            </div>
                                            <div class="item-info">
                                                <p>Duis autem vel eum iriure dolor in hendrerit in vulputate velit.</p>
                                            </div>
                                        </div>
                                    </div>
                                </div>
            
                                <div class="item-wrap image-wrap-corner-2" style="padding-right: 0px;">
                                    <img class="corner" src="assets/images/premium-corner.png">
                                    <div class="item shadow-ads">
                                        <div class="item-image">
                                            <a href="#"><img src="assets/images/item/12.jpg" alt="" class="img-responsive img-thumbnail"></a>
                                            <div class="item-price">
                                                <span>R$3950</span>
                                            </div> 
                                        </div>
                                        <div class="item-description">
                                            <div class="item-title">
                                                <h3><a href="#">Diecast Model Motorcycle</a></h3>
                                            </div>
                                            <div class="item-info">
                                                <p>Duis autem vel eum iriure dolor in hendrerit in vulputate velit.</p>
                                            </div>
                                        </div>
                                    </div>
                                </div>
            
                            </div>
            
                        </div>
            
                    </div>
                </div>  
            </div>
    

5
  • Não resolveu, pois os blocos grudaram todos, sem espaçamento.
    – ElvisP
    Commented 8/08/2018 às 21:43
  • @EliseuB. ai é uma questão de padding, repare que eu já editei a resposta e fiz o ajuste, Executa ai de novo pra ver como ficou
    – hugocsl
    Commented 8/08/2018 às 21:45
  • Obrigado Hugo, perfieto! Gratidão.
    – ElvisP
    Commented 8/08/2018 às 21:48
  • @EliseuB. cara não deixe de ler os links citados para entende direitinho como construir a regra, vai te ajudar em outras ocasiões! Tmj
    – hugocsl
    Commented 8/08/2018 às 21:49
  • 1
    Tá bem, vou ler mais sobre os seletores, comecei aqui mas tá entrando aos poucos na cabeça, a regra entendi, mas a estitização me perdi, porisso fiz desse modo errôneo, mas vou me esforçar mais para isso e um dia ajudar os outros aqui.
    – ElvisP
    Commented 8/08/2018 às 21:50

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 .