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