article > li:empty に色がつきません

これでは、存在しない article 直下の li を指定してしまっています。
2021年11月5日
ユーザー
index.htmlのコード
<article>
   <ul>
     <li>こんにちは</li>
     <li></li>
     <li>こんにちは</li>
     <li>こんにちは</li>
     <li></li>
     <li>こんにちは</li>
   </ul>
  </article>

styles.cssのコード
li:empty{
  background:purple;
}

上記の場合は空白に色がつくのですが、下記の場合だと

styles.cssのコード
article > li:empty{
  background:purple;
}

この場合だと色がつかず無効になってしまう理由はなんですか。
上記にはないのですがulが二つあるのでarticleulにだけ空白がある場合に色をつけたいと思いarticle > li:empty...というコードを書きました。
この場合の無効になっている理由とどうすれば可能になるか教えて頂きたいです。

この回答を見るにはプレミアムサービスへの登録が必要です

プレミアムサービスとは?