You could do something like this
li:nth-child(4n+1), li:nth-child(4n+2) {
color: blue;
}
example on codepen: http://codepen.io/erikL/pen/qyeKc/
题
I have a simple unordered list.
<ul>
<li>First item</li>
<li>Second item</li>
<li>Third item</li>
<li>Forth item</li>
<li>Fifth item</li>
<li>Sixth item</li>
</ul>
I need to be abel to select every other element in pairs. So basically, I need the first + second, fifth + sixth, and so on as the pattern will repeat indefinitely.
I want to avoid using javascript as this will be an angular app, so I don't to do any DOM manipulation.
I've tried messing with nth-child()
equations but can't figure out what equation will give me what I need. Any ideas? Any help is appreciated!
解决方案
You could do something like this
li:nth-child(4n+1), li:nth-child(4n+2) {
color: blue;
}
example on codepen: http://codepen.io/erikL/pen/qyeKc/
其他提示
you can select every fourth item minus 3 and 2 to include the first 2 one:
li:nth-child(4n-3),
li:nth-child(4n-2)
Just an update:
now it is possible to use keywords odd
and even
.
Example: p:nth-child(even){...}