css nth-childとnotを併用したい

Question

やりたいこと

リストをストライプ状に表示したいのですが、あとからdisplay: noneして一部要素を非表示にしたとき、非表示にした部分のストライプが同じ色で連続してしまうので質問します。

試したCSS

.test > :not(:nth-child(2n-1)):not([style='display: none;']){ background-color: #232123 }"

Answer 1

スタイルでdisplay=noneとしても、要素としては残っているのでnth-childの検索に含まれてしまいます。

:not([style='display: none;'])を指定しても、その要素にスタイルが適用されないだけでnth-childからは外れません。

stack overflowに同様の問題の解決策（jQuery）がありました。
参考にしてください。
How to get nth-child selector to skip hidden divs [duplicate]

Comments

[Styfish]

cssのみで実現することは不可能なのでしょうか？

[k_a]

cssだけで再現することはできません。

ちなみにですが、`display: none`はどの様な方法で加えるのでしょうか？

・手で直接htmlに書き加えるのであれば、その要素をコメントアウトしておけば表示もされませんし、CSSもそのままで望み通りの形になります。
・Javascriptなどで動的に加えるのであれば、先の回答の様に要素を消してしまえばよいと思います。

[Styfish]

要素.style.display = "none"とやっています。
現在ライブ配信のチャットフィルター的なものを作っているのですが、チャットの仕様上要素を消してしまうとエラーが出てしまうので、それはできないんです...。
ありがとうございます。

[k_a]

ああなるほどそういう感じなんですね。
要素を消すのはだめとのことですが、新しい要素を追加するのは問題有りませんか？
もしそれが大丈夫なら、ダミーの要素を挿入して奇数偶数の辻褄を合わせるのが楽そうです。

[Styfish]

なるほど...!
その考えはありませんでした。
試してみます！回答ありがとうございました！