CSSでHTMLの複数ある多階層構造の特定の子要素を指定する

Question

前提・実現したいこと

CSSで複数ある多階層構造の特定の子要素だけを指定して除外したいです。一番最初の要素だけですので:first-of-typeなどが使えるといいかなと思っています。

発生している問題の例

div*3>section>ul>li*3

<div>
  <section>
    <ul>
      <li></li> //こちらの要素だけを除外したいです
      <li></li>
      <li></li>
    </ul>
  </section>
</div>
<div>
  <section>
    <ul>
      <li></li>
      <li></li>
      <li></li>
    </ul>
  </section>
</div>
<div>
  <section>
    <ul>
      <li></li>
      <li></li>
      <li></li>
    </ul>
  </section>
</div>

試したこと

div li:first-of-type {
 display: none;
}

のようなことを試しましたが無理でした。