中身のないdiv要素の内で奇数番目の物のみにcssを適用したい

Question

以下のようなHtmlで、<div>の中身が空でない(<div class="hoge">中身あり</div>)
div要素内の<span>で、奇数のものだけにcssを当てたいです。

<div>
  <div class="hoge"><span class="huga">空でない１番目</span></div>// <= ここにcssをあてたい
  <div class="hoge"></div>
  <div class="hoge"><span class="huga">空でない２番目</span></div>
  <div class="hoge"></div>
  <div class="hoge"><span class="huga">空でない３番目</span></div>// <= ここにcssをあてたい
  <div class="hoge"><span class="huga">空でない４番目</span></div>
  <div class="hoge"></div>
</div>

以下のように工夫してみたのですが、

div[class="hoge"]:not(:empty):nth-child(odd) .huga {
    margin-top: 10px;
}

div[class="hoge"]:not(:empty) までで、div要素が空でないものを取得できる
のですが、その後の:nth-child(odd)がdiv要素が空のものまで含めた
番号となってしまいます。
奇数の箇所だけ(例：空でない１番目と空でない３番目の箇所)にcssを当てたいのですが
何か良い方法はありませんでしょうか？

Answer 1

何か良い方法はありませんでしょうか？

CSSだけでは不可能です。

いまのところ、疑似セレクタで「兄弟の一部」を抽出できるのは、

• :nth-child…兄弟の全要素の中から何番目かピックアップする
• :nth-of-type…div:nth-of-typeのようにして、「同じ兄弟の<div>」の中から何番目かを拾う（タイプセレクタ専用）

の2通りの方法だけで、「中身のある<div>」のような複雑な条件について何番目かを指定することはできません。

Comments

[hobby2018]

ありがとうございます。JSでdivの中身のないものは要素自体を作成しないように修正して
無事適用することが出来ました。