Exclude the last divider off a loop of 5 items? - php

Question

My issue is that I have cart section of the website where it automatically picks 5 related products on the right side of the page. I added a bottom-border style so you can tell the difference between each product. The issue here is that there's 4 dividers, or border lines, whatever you wish to call it. However as you can see in the picture below, having the 4th divider is completely redundant since it's already the last item. My question is what code would be necessary to add to take off the last divider to this stylesheet. I only have 1 line of code for the add to cart bottom border since it repeats itself every time a new object is added, and the max is 5 items every time.
I was going to take a picture and upload it directly but apparently you need more points just to post a picture, so I uploaded a picture at imgur until I have enough points. Cheers.
Code:
HTML Page:
<div class="addToCart_bottomBorder"></div>
CSS Page:
.addToCart_bottomBorder {
border-bottom: #d9d9d9 1px solid;
margin-top:3px;
margin-bottom: 5px;
clear:both;
}
.addToCart_bottomBorder li:last-child {
border-bottom: none;
}
Reference pic:

Answer 1

Might have better results using border-top and removing it from the first child :)
IE8 and below, from memory, don't support last-child
.addToCart_bottomBorder li {
border-top: #d9d9d9 1px solid;
margin-top:3px;
margin-bottom: 5px;
clear:both;
}
.addToCart_bottomBorder li:first-child {
border-top: none;
border-bottom: none;
}
and here is the html
<ul class="addToCart_bottomBorder">
<li class="">content</li><br />
<li class="">content</li><br />
<li class="">content</li><br />
<li class="">content</li><br />
<li class="">content</li><br />
</ul>
and a jsFiddle for good measure
edit
Updated code and added a fiddle.

Answer 2

You could use the CSS adjacent sibling selector (+).
Assuming your HTML looks like this:
<div class="addToCart_bottomBorder">
<ul>
<li>First</li>
<li>Second</li>
<li>Third</li>
<li>Last</li>
</ul>
</div>
Then the CSS would be:
.addToCart_bottomBorder {
margin-top:3px;
margin-bottom: 5px;
clear:both;
}
.addToCart_bottomBorder li+li {
border-top: #d9d9d9 1px solid;
}
Fiddle: http://jsfiddle.net/M8kN2/

Answer 3

Lets break this down, .addToCart_bottomBorder li:last-child,
.addToCart_bottomBorder This is the parent
li and this is the child
With the following selector you are targeting the li of your parent, .addToCart_bottomBorder, and then removing the border from the last li but since those styles are on the parent you are removing nothing from them.
Without more of your html and css it is hard to tell how you have it structured but this is how it should be structured.
<ul class="pickFive">
<li class="addToCart_bottomBorder">
Some content in here
</li>
<li class="addToCart_bottomBorder">
Some content in here
</li>
<li class="addToCart_bottomBorder">
Some content in here
</li>
<li class="addToCart_bottomBorder">
Some content in here
</li>
<li class="addToCart_bottomBorder">
Some content in here
</li>
</ul>
With this css,
.addToCart_bottomBorder {
border-bottom: #d9d9d9 1px solid;
margin-top:3px;
margin-bottom: 5px;
clear:both;
}
.pickFive li:last-child {
border-bottom: none;
}
If you structure it like so the last child of the parent will have no border. Check this JSFIDDLE to see how it works.

Answer 4

Instead of this
.addToCart_bottomBorder li:last-child {
border-bottom: none;
}
Do This
.addToCart_bottomBorder li:last-child {
border-bottom: #FFFFFF 0px solid;
}
that's how i do it anyways, and it works fine