-1
My HTML code has 12 tags that form 4 blocks of content per line, I would like to apply a different style as follows with Nth-Child:
1 div - a CSS style Next 3 Divs - another CSS style
And so repeat 1 and 3, 1 and 3, 1 and 3, I did it in a way but responds up to the fourth div, in the fifth, which would be 1 of the second line, it no longer applies.
<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>
And the 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>
The reason for using :Nth-Child is that in the first column blocks the div must be glued to the parent DIV, and the others with padding pada separate from each other, because I use BOOTSTRAP 3 to work with the Htmle CSS structure, so I divided the container with 4 columns per row (col-Xs-12 col-Sm-12 col-Md-4 col-lg-4).
In the sample below follows part of the layout of the content blocks, and how I would like them to stay:
If possible put also the HTML
– hugocsl
@hugocsl Feito!
– ElvisP
Possible duplicate of What do "n" means, numbers and signals on "Nth-Child" or "Nth-last-Child" selectors"?
– Bacco
Added to this: https://answall.com/a/121024/70
– Bacco
@Bacco I just used your answer as reference :D
– hugocsl
@Bacco do not believe to be duplicate, because the need is jump 1 and 3, 1 and 3, I read these publications but it did not work for my problem.
– ElvisP
@Eliseub. the second link shows how to resolve the issue of lines. Understanding the first, which is the functioning, already answers the question (which, by the way, is the same knowledge applied in the answer of colleague Hugo)
– Bacco