html - CSS選択:特定のクラスの子のみを数えて選択する方法は?

Question

すべてのアイテムが同じレベルにある HTML を考えると、次のようになります。

<div class="h2">Title: Colors</div>
 <div class="pair">Hello world (1)</div>
 <div class="pair">Hello world (2)</div>
 <div class="pair">Hello world (3)</div>
 <div class="pair">Hello world (4)</div>
 <div class="pair">Hello world (5)</div>
 <div class="pair">Hello world (6)</div>

<div class="h2">Title: Units</div>
 <div class="pair">Hello world (1)</div>
 <div class="pair">Hello world (2)</div>
 <div class="pair">Hello world (3)</div>
 <div class="pair">Hello world (4)</div>
 <div class="pair">Hello world (5)</div>
 <div class="pair">Hello world (6)</div>

前の .h2 要素から始まる n+3 および n+4 .pair 要素を選択するにはどうすればよいですか?

したがって、1 と 2 は白、3 と 4 はピンク、5 と 6 は白などです。

試してみ.pair:nth-child(4n+3), .pair:nth-child(4n+4) { background: #FFAAAA; }ましたが、子供でもある体の子供を数えるh2ので、バランスが崩れます。

http://jsfiddle.net/zPYcy/2/

---

編集: .class (n+3) などのパターンに従って隣接するアイテムを選択する純粋な CSS セレクターが見つかりませんでした。あるいは、次のようなCSS セレクターの無限のシリーズdiv + .class + .class + .class ...。orと一緒に div で囲みます。またはJSが必要です。別のハックを知っていますか？シェア歓迎！:nth-child(n+3):nth-of-type(n+3)

Answer 1

これは、 sibling、nth-child、およびnth-last-childセレクターを組み合わせたソリューション です。

クラス h2 を持つ各 div は、次のように「色」と「単位」と呼ぶ追加のクラスも使用する必要があります。

<div class="h2 colors">Title: Colors</div>
...
<div class="h2 units">Title: Colors</div>
...

クラスh2を持つ前の兄弟を提示するすべての子に適用し、ピンクの div を描画する次のルールを色付けします

.h2.colors ~ .pair:nth-child(4n+4), .h2.colors ~ .pair:nth-child(4n+5) { 
    background: #FFAAAA; 
}

もちろん、これにより、クラスh2およびunitsの div の下にある div も描画されます。私たちはそれが起こることを望んでいません。したがって、次の 2 つの規則を適用して、h2 単位まで逆順に選択します。

.h2.units ~ .pair:nth-last-child(4n+3), .h2.units ~ .pair:nth-last-child(4n+4) { 
    background: #FFAAAA; 
}

最初のルールによって描画された余分な div を修正するために、白い背景も適用する必要があることに注意してください。

 .h2.units ~ .pair:nth-last-child(4n+1), .h2.units ~ .pair:nth-last-child(4n+2) { 
        background: #ffffff; 
    }

nth-last-child セレクターを使用する場合、最後のグループの div の数が奇数または偶数であることに注意してください。

そして、そこにいます！

これが遊ぶためのフィドルです

Answer 2