[英]Using nth-child to make a chess pattern
I am breaking my head to achieve something quite relatively simple here. 我想要在这里做一些相对简单的事情。
I need to select every 3rd and 4th element on my page, how could I do that using css :nth-child()? 我需要在页面上选择每个第3和第4个元素,我怎么能用css:nth-child()来做?
JS answers also welcome. JS的答案也很受欢迎。
Thanks a lot. 非常感谢。
***EDIT ***编辑
Apologies guys my question was badly written. 抱歉,我的问题写得很糟糕。 I attached an example below of what I need.
我在下面附上了一个我需要的例子。
This is the outcome I need, http://jsfiddle.net/8FXL6/ 这是我需要的结果, http://jsfiddle.net/8FXL6/
<li></li>
<li class="highlight"></li>
<li class="highlight"></li>
<li></li>
<li></li>
etc
Without hardcoding the class names. 没有硬编码类名。
*:nth-child(3),*:nth-child(4){
}
Technically, this selects every element that is the 3rd or 4th child in its container. 从技术上讲,它选择容器中第3个或第4个子元素的每个元素。 If you want to select every 3rd or 4th element (3,4,6,8 etc.), use:
如果要选择每个第3或第4个元素(3,4,6,8等),请使用:
*:nth-child(3n),*:nth-child(4n){
}
From your edit, you need: 在您的编辑中,您需要:
li:nth-child(4n-2),li:nth-child(4n-1){
}
You can use comma to combine selectors using nth-child to get elements, 您可以使用逗号将使用nth-child的选择器组合起来获取元素,
elements = $('div .className :nth-child(3), div .className :nth-child(4)');
How about using css only? 如何仅使用css?
Every third element: 每三个元素:
*:nth-child(3n+3) {color: red}
Every fourth element: 每四个要素:
*:nth-child(4n+4) {color: blue}
Here's demo on jsfiddle: http://jsfiddle.net/dufsx/ 这是关于jsfiddle的演示: http : //jsfiddle.net/dufsx/
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.