Is it possible to select every other group of three in CSS? And if it is; how?
So in the sample below apply style to the 4-6 and 10-12 li
s.
You're looking for nth-child:
ul li:nth-child(6n+4),ul li:nth-child(6n+5),ul li:nth-child(6n+6) {
background:red;
}
http://jsfiddle.net/bhlaird/utEP4/1/
You could achieve this with a single selector, using a combination of :not
and :nth-child
.
ul > li:not(:nth-child(6n+1)):not(:nth-child(6n+2)):not(:nth-child(6n+3)) {
color:blue;
}
jsFiddle here
Using that selector by itself is pretty useless, though, considering you cannot style the other elements.
ul > li:not(:nth-child(6n+4)):not(:nth-child(6n+5)):not(:nth-child(6n+6)) {
color:red;
}
Using a combination of both will allow you to style everything, see the demo.