CSSで特定の項目を除いた偶数番と奇数番にスタイルを適用したい

Question

前提・実現したいこと

CSSのみで擬似セレクタや結合子などを駆使してリスト項目からある特定の項目を飛ばしてAとBを交互にそれぞれ異なるスタイルを適用させたいのですが、この場合どのように書いたら良いでしょうか？
※「除外するリスト項目」自体は偶数番になるか奇数番になるかを定められず、連続する場合もあります

• リスト項目 A
• 除外するリスト項目
• リスト項目 B
• リスト項目 A
• リスト項目 B
• リスト項目 A
• 除外するリスト項目
• 除外するリスト項目
• リスト項目 B
• リスト項目 A
• 除外するリスト項目
• リスト項目 B

試したこと

以下のCodepenの状態で詰まってしまいました
https://codepen.io/anon/pen/QeKezr?editors=1100

ご教示のほどよろしくお願いいたします

Comments

[Lhankor_Mhy]

除外しないリスト項目にクラスをつければできる、というのはご承知の上でのご質問ですよね？

[hentaiman]

作る段階で複雑で混乱してるのに後で変更するとなるともっと困るんじゃないかい？適用する個所だけにCSS当てた方がいいでしょ

Answer 1

CSSでは実質不可能です。
nth-childで指定すると3つ目のリスト項目 Bが除外するリスト項目に変わった場合
以降の内容が正しい並びにならなくなるのでJavaScriptで処理するべき内容です。

Comments

[klleur-9]

やはりCSSだけでは無理なんですね・・大人しくJS側で対応します。
ありがとうございました