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"])

Answer 2

In addition to the great answer by @Cédric Belin - if you wanted to make the CSS backwards compatable you could use the following CSS selectors:

ul .featured + li {
    /* some styles */
}

ul li.featured {
    /* some styles */
}

Note that the order of the CSS styles is important here as both selectors have the same weighting - so which ever style comes last will be the one that overrides the previous style (due to the cascading nature of CSS)

Working example: http://jsfiddle.net/Ku77T/