2つのテーブル行ごとにnth-child

Question

テーブルの2つの行をすべて灰色にする必要があり、可能であれば、nth-childを使用することをお勧めします。

私はChris Coyier's nth-child testerを使いこなしましたが、まだそれを得ることはできません。

私は、次の式が必要です。

1,2 - grey 
3,4 - white 
5,6 - grey 
7,8 - white 
9,10 - grey 

などを。私はいくつかの提案であると確信しているので、私はHTMLにクラスを入れないことを好むだろう。 nth-childでこれを取り除く方法があれば、それは私が探しているものです。

Answer 1

あなたが4のグループをやっていることを理解してから、4番目の要素と4番目の要素から1を引いたものを白から、4番目の要素から2を引いたもの、または4番目の要素を引いたものから3を引いたものを灰色にすることができます。

だから、あなたは4nと4n-1、その後4n-2と4n-3を使用したい：

div:nth-child(4n), div:nth-child(4n-1) { 
    background: red; 
} 
div:nth-child(4n-2), div:nth-child(4n-3) { 
    background: blue; 
} 

コードがあなたのケースに正確ではないことを、私はjsFiddle proof-of-conceptのためにそれを書きました。

NB免責事項：nth-childはIE8では機能しません。もちろん、典型的な問題です。

Answer 2

ここでは、各テーブルの最初の列を右揃えに使用しています。

table td:nth-child(2n-1) { 
    align: right; 
    text-align: right; 
}