CSS Первый элемент, который не имеет класса

У меня есть несколько элементов списка, первый из которых содержит класс, а через некоторое время - несколько. Withh CSS, я бы хотел выбрать первый элемент в списке, который не имеет признанного класса...

Код выглядит следующим образом:

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

Я пробовал следующее без эффекта:

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

Любые идеи о том, как это сделать, не прибегая к jQuery?

UPDATE Способность существует, чтобы добавить классы, отличные от объектов, если это поможет. Например:

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

Ответ 1

Используйте "Комбинированный смежный брат": http://www.w3.org/TR/css3-selectors/#adjacent-sibling-combinators

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

Ответ 2

В дополнение к большому ответу @Cédric Belin - если вы хотите, чтобы CSS назад совместимый, вы могли бы использовать следующие селектора CSS:

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

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

Обратите внимание, что порядок стилей CSS важен здесь, поскольку оба селектора имеют одинаковый вес - так, что когда-либо стиль приходит последним, будет тот, который отменяет предыдущий стиль (из-за каскадной природы CSS)

Рабочий пример: http://jsfiddle.net/Ku77T/