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;
}

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

Answer 1

除外して設定するなら:notと組み合わせればいいのでは？

<style>
div:not(:first-child) li,
div:first-child li:not(:first-child)
{
color:red;
}
</style>
<div>
  <section>
    <ul>
      <li>1</li>
      <li>2</li>
      <li>3</li>
    </ul>
  </section>
</div>
<div>
  <section>
    <ul>
      <li>4</li>
      <li>5</li>
      <li>6</li>
    </ul>
  </section>
</div>
<div>
  <section>
    <ul>
      <li>7</li>
      <li>8</li>
      <li>9</li>
    </ul>
  </section>
</div>

Comments

[poppy1115]

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

みたいな感じでできました。ありがとうございました。

[yambejp]

なるほど、除外じゃなくて指定ですね

Answer 2

div:first-of-type li:first-of-type {

でしょうか。

Answer 3

自分で解決いたしました。YouTubeの特定の動画で日付が見れなくなるバグがありいじってみました。グッド数のみを表示させたかったので指定して除外したかったのです。デスクトップ版のYouTubeを使う方は是非こちらのスタイリングツールでお試しください。

#top-level-buttons-computed #text {
  display: none;
}

#top-level-buttons-computed ytd-toggle-button-renderer:first-of-type .yt-simple-endpoint #text {
  display: block;
}

Answer 4

無理でしたというのは「非表示にしたい要素以外のものも消えてしまう」という事でしょうか？
（具体的に どうなって欲しいけど どうなった、というのを書くと良いです）

---

div li:first-of-type

これだと「div 配下の、（各要素の）最初の li」を指します。
2 つめの section や 3 つめの section の先頭 li も消えてしまうのが意図と違う、ということでしょうか。

もしそうだとすると、
「先頭 div 配下の先頭 section の 先頭 ul、の先頭 li」
という指定にすれば良いかなと思います。（:first-of-type が使えます）

あと「直下」を指定する > とかを使っても良いかな？（今回は使えなくてもいけそうですが、ネストが深い場合は使った方が良いかもしれません）

---

追記：
そうか、「先頭の li にスタイルをあてたいけど、コメントが付いている箇所のみ あてたくない」ということですね。

:not(★) で 「★ 以外のもの」という指定ができますね。