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

У меня есть несколько пунктов списка, первый с классом избранных, а через некоторое время несколько без. С помощью 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?

ОБНОВЛЕНИЕ Существует возможность добавлять классы, не связанные с объектами, если это поможет. Например:

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