I'm wanting to style li's with alternative backgrounds. The pattern should go red > blue > red > blue etc.
The problem is I'm using a :not selector to ignore the first row in one list, and because of that the pattern for that list starts at blue > red > blue. I understand why that is but I'm wondering if it's possible to have the :nth-of-type() odd and even ignore the rows from it's calculations? Or if there is a work around without adding extra markup to my html.
http://jsbin.com/kusolecudo/edit?html,css,output
I do not want to apply any extra markup to my HTML or duplicate my CSS for the :not list.
li:not(.head):nth-of-type(odd)
{ background: red }
li:not(.head):nth-of-type(even)
{background: blue }
ul {width:40%;display:inline-block;list-style:none}
<ul>
<li class="head">
test
</li>
<li>
test
</li>
<li>
test
</li>
</ul>
<ul>
<li>
test
</li>
<li>
test
</li>
<li>
test
</li>
</ul>