CSS First element that does not have a class

Question

I've got a few list items, the first one's with a featured class and the after a while a few without. Withh CSS, I'd like to select the first item in the list that does not have a featured class...

The code is as follows:

<ul>
<li class="featured"></li>
<li class="featured"></li>
<li></li>
<li></li>
<li></li>
</ul>

I've tried the following with no effect:

ul li:not(.featured):first-child {
  /* Do some stuff here */
}

Any ideas on how to do this without resorting to jQuery?

UPDATE The ability does exist to add non-feature classes if that would help. E.g:

<ul>
<li class="listing featured"></li>
<li class="listing featured"></li>
<li class="listing"></li>
<li class="listing"></li>
<li class="listing"></li>
</ul>

Answer 1

Use the "Adjacent sibling combinator": http://www.w3.org/TR/css3-selectors/#adjacent-sibling-combinators

li.featured + li:not([class="featured"])