I can't seem to figure this out. It's frustrating because I usually don't struggle with something as basic as a pseudo-class.
My goal is to remove the right border of a div element for the last child. I've managed to make it work by adding a class to the last element, but I want to find a more efficient solution since the content will be generated in a loop.
Below is the HTML code. The entire content is enclosed within a section with an id of #small-featured. All the content inside bootstrap columns is wrapped in #featured-wrapper.
<section id="small-featured">
<div class="container">
<div class="row">
<div class="col-md-3">
<div class="featured-wrapper">
<a href="#"><img src="assets/img/36-6022.png" alt=""></a>
<p>The Product Title</p>
</div>
</div>
<div class="col-md-3">
<div class="featured-wrapper">
<a href="#"><img src="assets/img/36-5100.jpg" alt=""></a>
<p>The Product Title</p>
</div>
</div>
<div class="col-md-3">
<div class="featured-wrapper">
<a href="#"><img src="assets/img/46-455.jpg" alt=""></a>
<p>The Product Title</p>
</div>
</div>
<div class="col-md-3">
<div class="featured-wrapper">
<a href="#"><img src="assets/img/unisaw.jpg" alt=""></a>
<p>The Product Title</p>
</div>
</div>
</div>
</div>
</section>
Here is the CSS
#small-featured {
text-align: center;
}
#small-featured img {
width: 250px;
padding: 0 15px;
}
.featured-wrapper {
border-right: 1px solid #eee;
}
#small-featured .featured-wrapper:last-child {
border-right: none;
}
When I apply my final CSS rule, all borders disappear. I have also tried targeting just .featured-wrapper:last-child without success.
Any suggestions?