[英]css apply styling to all elements except those in the last row
I have a product category page with 3 products per row. 我有一个产品类别页面,每行3个产品。 I want every row to have a border bottom except for the last row.
我希望每一行都有一个边框底部, 除了最后一行。 This should have no border bottom.
这应该没有边框底部。 The last row may contain 1, 2, or 3
<li>
elements. 最后一行可能包含1,2或3个
<li>
元素。
The current code that I'm using applies the border-bottom property to every 3rd <li>
element, which is not quite what I want. 我正在使用的当前代码将border-bottom属性应用于每个第3个
<li>
元素,这不是我想要的。
CSS: 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: HTML:
<ul class="products">
<li>Product</li>
<li>Product</li>
<li>Product</li>
<li>Product</li>
<li>Product</li>
<li>Product</li>
</ul>
I think I figured this out. 我想我想出来了。 The second ruleset below accounts for any amount of products on the last row.
下面的第二个规则集说明了最后一行中的任何数量的产品。
.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;
}
http://jsfiddle.net/6rso3t85/ http://jsfiddle.net/6rso3t85/
A better fiddle, adjusting the display as asked, and showing the three use cases 一个更好的小提琴,按要求调整显示,并显示三个用例
http://jsfiddle.net/6rso3t85/1/ http://jsfiddle.net/6rso3t85/1/
This should do the trick: (Tested on FF 33) 这应该可以解决问题:(在FF 33上测试过)
.products li:nth-last-child(-n+3) {
border-bottom: none;
}
This is a great website for testing nth-child stuff. 这是一个测试n-child东西的好网站。
EDIT: 编辑:
Your situation is quite tricky and I think it's not possible only using CSS. 你的情况非常棘手,我认为不可能只使用CSS。
I made a working JSBin , which uses JavaScript to achieve your desired result. 我做了一个有效的JSBin ,它使用JavaScript来实现你想要的结果。
HTML 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 CSS
.products li {
width: 30.33333%;
border-bottom: 1px solid red;
}
JS 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');
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.