ignoring rows using :not() and styling with nth-of-type odd & even

Viewed 761

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>

1 Answers
Related