Css applies styling to all elements except those on the last line
I have a product category page with 3 products per row. I want every line to have a bottom border except for the last line. It shouldn't have a single borderline bottom. The last line can contain elements 1, 2, or 3 <li>
.
The current code I'm using applies the border-bottom property to every third element <li>
, which isn't exactly what I want.
CSS
.products li {
width: 33.33333%;
}
.products li:nth-child(3n){
border-bottom: 1px rgba(51, 51, 51, 0.1) solid;
}
.products li:nth-child(2-PREVIOUS-SIBLING-ELEMENTS){
border-bottom: 1px rgba(51, 51, 51, 0.1) solid;
}
HTML:
<ul class="products">
<li>Product</li>
<li>Product</li>
<li>Product</li>
<li>Product</li>
<li>Product</li>
<li>Product</li>
</ul>
source to share
I think I figured it out. The second set of rules below takes into account any number of products on the last line.
.products li:nth-child(3n){
border-bottom: 1px rgba(51, 51, 51, 0.1) solid;
}
.products li:nth-last-child(-n + 3):nth-child(3n + 1),
.products li:nth-last-child(-n + 3):nth-child(3n + 1) ~ li {
border: none;
}
Best Violin, On-Demand Display Customization and Display of Three Use Cases
source to share
This should do the trick: (Tested on FF 33)
.products li:nth-last-child(-n+3) {
border-bottom: none;
}
Here's a Fiddle
This is a great site for testing nth-child .
EDIT:
Your situation is quite complicated and I think this is not possible using CSS alone.
I have created a working JSBin that uses JavaScript to achieve the desired result.
Html
<ul class="products">
<li>Product</li>
<li>Product</li>
<li>Product</li>
<li>Product</li>
<li>Product</li>
<li>Product</li>
<li>Product</li>
<li>Product</li>
<li>Product</li>
<!-- more products -->
</ul>
CSS
.products li {
width: 30.33333%;
border-bottom: 1px solid red;
}
Js
var size = $('.products li').size();
var previous = Math.floor((size)/3)*3;
if (size % 3 === 0 ) {
previous = size - 3;
}
for (var i = previous; i < size; i++ ) {
$('.products li:eq(' + i + ')').css( 'border-bottom' , 'none');
}
source to share