nth-of-type（n）をテーブルとともに使用する
テーブルを読みやすくするために、背景色を交互にして行をスタイルすると便利です。 テーブルをスタイルする最も一般的な方法の1つは、他のすべての行の背景色を設定することです。 これはしばしば "ゼブラストライプ"と呼ばれます。
これを達成するには、CSSクラスで1行おきに設定し、そのクラスのスタイルを定義します。 これは動作しますが、それについては最も効果的な方法ではありません。
この方法を使用するときは、その表を編集する必要があるたびに、表内のすべての行を編集して、各行が変更と一貫していることを確認する必要があります。 たとえば、テーブルに新しい行を挿入すると、その下の行はすべて、クラスを変更する必要があります。
CSSを使用すると、ゼブラストライプを使用して表をスタイルするのが簡単になります。 余分なHTML属性やCSSクラスを追加する必要はなく、：nth-of-type（n） CSSセレクタを使用するだけです。
：nth-of-type（n）セレクタはCSSの構造的擬似クラスであり、親要素と兄弟要素との関係に基づいて要素のスタイルを設定できます。 ソース順に基づいて1つまたは複数の要素を選択するために使用することができます。 つまり、特定の型の親のn番目の子であるすべての要素に一致することができます。
文字nは、キーワード（奇数または偶数など）、数値、または数式にすることができます。
たとえば、他のすべての段落タグを黄色の背景色でスタイルするには、CSSドキュメントに次のものが含まれます。
p：n番目の型（奇数）{
背景：黄色;
}
あなたのHTMLテーブルから始める
まず、通常はHTMLで記述するようにテーブルを作成します。 行や列に特別なクラスを追加しないでください。
あなたのスタイルシートに次のCSSを追加してください：
tr：n番目の型（奇数）{
背景色：#ccc;
}
これは、最初の行から灰色の背景色で1行おきにスタイルを適用します。
同じ方法でスタイルを交互に切り替えるスタイル
テーブルの列に同じ種類のスタイルを適用することができます。 これを行うには、CSSクラスのtrをtdに変更するだけです。 例えば：
td：n番目の型（奇数）{
背景色：#ccc;
}
n番目の型（n）セレクタでの式の使用
セレクタで使用される式の構文は+ bです。
aはサイクルまたはインデックスのサイズを表す数値です。
nは実際には文字「n」であり、0で始まるカウンタを表します。
+は演算子であり、 " - "
bは整数で、オフセット値を表します。たとえば、セレクタがバックグラウンドカラーの適用を開始する行数を指定します。 これは、式に演算子が含まれている場合に必要です。
たとえば、3行ごとに背景色を設定する場合、数式は3n + 0になります。 あなたのCSSは次のようになります：
tr：n番目の型（3n + 0）{
背景：slategray;
}
nth-of-typeセレクタを使用するための便利なツール
擬似クラスのnth-of-typeセレクタを使用するという式の側面で少し気になる人は、：nth Testerサイトを、あなたが望む外観を実現する構文を定義するのに役立つ便利なツールとして試してみてください。 ドロップダウンメニューを使用してn番目のタイプを選択します（nth-childなどの他の擬似クラスもここで試すことができます）。