css - CSS で特定のクラスの偶数要素を選択する

Question

HTML:

<ul>
  <li class="a">Hi-1</li>
  <li class="b">Hi-2</li>
  <li class="b">Hi-3</li>
  <li class="a">Hi-4</li>
  <li class="b">Hi-5</li>
  <li class="b">Hi-6</li>
</ul>

CSS:

 li{
   list-style:none;
 }
.a{
   color:blue;
 }
.b:nth-child(odd){
  color:red;
}
.b:nth-child(even){
  color:violet;
}

ここをクリック

赤のHi-2、Hi-5と紫のHi-3、Hi-6が欲しいです。

Answer 1

コメントの他の質問でどのように指定されているか、これらの疑似クラスの使用を制限することはできません。したがって、nth-*疑似クラスを使用せず、マークアップを変更せずに、このスタイルを与えることができます

ul li:first-child + .b, .a ~ .a + .b { color: red; }
.b + .b { color: violet; }

jsbin の例

Answer 2

デモ

li{
    list-style:none;
}
.a{
    color:blue;
}
.b:nth-child(2n),.b:nth-child(5n){
    color:red;
}
.b:nth-child(6n), .b:nth-child(3n){
    color:violet;
}

Answer 3

この CSS を使用します。

.b:nth-of-type(3n-1){
  color:red;
}
.b:nth-of-type(3n-3){
  color:violet;
}

デモはこちら