cssで、複数のクラス名を持つ要素の最初の要素を指定したい

Question

下記コードで、「item」、「sub」両方のクラスを持つ最初のli要素にcssを当てたい場合は、どのようにセレクタを指定すれば良いのでしょうか。

<ul>
  <li class="item">項目1</li>
  <li class="item">項目2</li>
  <li class="item">項目3</li>
  <li class="item sub">項目4</li>
  <li class="item sub">項目5</li>
</ul>

ul li.item {
  background-color: #eee;
  margin-bottom: 1em;
}

ul li.item.sub {
  background-color: #aaa;
}

ul li.item.sub:first-child {
  background-color: #666; /* 反映されない */
}

ul li.item.sub:first-child {} の指定では反映されませんでした。

ul li.item.sub:nth-child(4) {} のように、順番を指定すれば反映されるのですが、
項目が追加されることも考慮して、「二つのクラスを持ち、且つ要素の最初」というかたちで指定したいのですがどのように記述すればよいのでしょうか。

お詳しい方ご教授いただけますと幸いです。
宜しくお願い致します。

Answer 1

:first-childやnth-childは、親要素(ここではul)に所属する要素の順番で判定します。
ul li.item.sub:first-childの場合、ulから見て最初の要素が[項目1のli]なので、ここにclassとして[sub]が与えられている場合のみ動作します。
nth-child(4)で希望通りの挙動になったのはこのためです。
([項目4]は4つ目の要素なので)
そのため、要素を追加せずにfirst-childで実現するのは厳しそうです。

無理矢理ですが、以下のCSSを考えてみました。
「classに[item sub]を持つliが前に存在しない」かつ「ul配下でclassに[item sub]を持つli」に対して、スタイルを当てる方法です。

ul li.item {
  background-color: #eee;
  margin-bottom: 1em;
}

ul li.item.sub {
  background-color: #aaa;
}

ul li.item.sub:not(li.item.sub ~ li.item.sub) {
  background-color: #666; /* 前に[li.item.sub]の要素が存在しない場合に[ul li.item.sub]に対してスタイルを当てる */
}

追記.
何度か回答を修正してすみません。
最初に出した案では実現できないケースがあったので、セレクタの指定を一部直しました。

Comments

[no23h]

ご回答ありがとうございます。
教えていただいたコードで希望通りになりました！
擬似要素を駆使して、ここまで複雑な指定ができるのですね...
大変勉強になりました。
ベストアンサーにさせていただきました！