css - 2つのテーブル行ごとにn番目の子

Question

テーブルの2行ごとに灰色にする必要があり、可能であればn番目の子を使用したいと思います。

クリス・コイエのn番目の子のテスターをいじりましたが、それでも取得できません。

次の式が必要です。

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

等々。一部の人からの提案になると確信しているので、htmlにクラスを入れたくないです。n番目の子でこれをやってのける方法があれば、それが私が探しているものです。

Answer 1

4 つのグループを実行していることを理解すると、4 番目ごとの要素と 4 番目ごとの要素から 1 を引いたものが白になり、4 番目ごとの要素から 2 を引いたもの、または 4 番目ごとの要素から 3 を引いたものが灰色になることがわかります。

したがって、4nand 4n-1、次に4n-2and を使用し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の概念実証のために書きました。

注意: nth-childIE8 では機能しないことに注意してください。もちろん、典型的な問題です。

Answer 2

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

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