My HTML code has 12 tags that form 4 content blocks per line, I'd like to apply a different style as follows with nth-child:
1 div - a CSS style Next 3 divs - another CSS style
And so I repeat 1 and 3, 1 and 3, 1 and 3, I did it one way but answered until the fourth div in the fifth, which would be 1 in 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 the div must be pasted in the parent DIV, and the others with padding pada separate from each other, since I use BOOTSTRAP 3 to work with the HTMLe structure CSS, then I split the container with 4 columns per line (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 you would like them to stay:
