CSSのnth-childで奇数や偶数を指定！テーブルの背景色を変える

CSSのnth-child疑似クラスを使って、奇数（odd）と偶数（even）の行を簡単に指定する方法をご存知ですか。テーブルの行に交互に背景色を付けたり、リストアイテムを奇数だけスタイル変更したりする際に非常に便利なこの技法は、最新ブラウザで広くサポートされています。この記事では、基礎から応用まで「CSS nth-child 奇数 偶数」を深掘りし、テーブルの背景色チェンジを中心に実践的なコード例を紹介します。

CSS nth-child 奇数 偶数 の基本概念と構文

CSSの:nth-child()疑似クラスは、兄弟要素の中で何番目かに位置する要素を選択するためのものです。奇数を指定するにはodd、偶数を指定するにはevenを用います。数値指定や式（例えば 2n、2n＋1 など）を使えば、より柔軟に対象を絞ることが可能です。ブラウザの対応状況も良好で、現在普及しているモダンなブラウザで問題なく利用できます。

書き方の構造としては親要素の中でカウントが1番から始まり、odd は 1,3,5… 偶数以外の位置、even は 2,4,6… 偶数の位置にある要素を対象とします。式を用いると例えば「2n」は even と同じ、「2n＋1」は odd と同じ挙動を示します。

:nth-child(odd) と :nth-child(even) の使い方

:nth-child(odd) は 1番目、3番目、5番目…と奇数番目の要素を対象にスタイルを適用します。例えばテーブルの行(tr)で奇数行に背景色をつけることで、行振り分けが見やすくなります。一方で :nth-child(even) は 2番目、4番目、6番目…と偶数番号の要素を対象にします。

これらのキーワード指定は簡潔で直感的なため、テーブルのストライプ模様やリストアイテムの交互色分け、行列のデザイン調整などに頻繁に使われます。

数式（an+b）での応用指定

odd や even だけではなく、:nth-child() は数式を使って高度なパターンを指定できます。式の形は a n + b。ここで a はステップ数、b はオフセット値です。例えば 2n+1 は odd と同じ挙動、3n+2 は 2番目、5番目、8番目…の要素を対象にします。

また -n + N のような負の係数を含む式を使えば、先頭から特定の数までの要素のみをスタイル対象にできます。これにより複雑な領域・範囲での強調表現が可能です。

対象タイプ指定の注意点と:nth-of-typeとの違い

:nth-child() は親要素内の全ての子要素をカウントするため、タグが異なったりテキストノードが混ざったりすると想定外の番号が付くことがあります。特定のタグだけにスタイルを適用したい場合は、タグ名指定や :nth-of-type() の使用が適切です。

たとえば tr:nth-child(odd) は tr 要素だけでカウントするのではなく、前後の要素すべてを含めた中で奇数の位置にある tr が対象になります。HTML構造が複雑な際にはこの点を十分考慮する必要があります。

テーブルの背景色を変える具体的な実践例

Webページでテーブルを使用する機会は非常に多く、行ごとに背景色を変えて「ゼブラストライプ（縞模様）」にするのは可読性向上のため定番のスタイルです。ここでは CSS の :nth-child 奇数 偶数 を使って、テーブル全体または特定列の背景色を変える方法を紹介します。それぞれ複数のサンプルコードにより、HTML 構造や応用条件で使い分けができます。

テーブル全行に奇数・偶数で交互に背景色を適用する方法

以下のように tr:nth-child(odd) と tr:nth-child(even) を指定することで、テーブルの全行に交互に背景色を設定できます。タイトル行（thead）のあるテーブルでも tbody の中で指定すればタイトル行は影響を受けず目的通りになります。

table tbody tr:nth-child(odd) { background-color: #f0f0f0; }

table tbody tr:nth-child(even) { background-color: #ffffff; }

この指定により奇数行にはグレー系、偶数行には白系といった配色が交互に適用され、読み手の視線が迷わなくなります。

特定の列やセルに奇数・偶数指定をかける方法

行だけではなく列やセル（td や th）の中において奇数・偶数の子要素を指定することが可能です。例えば各行の中の 1 列目や 2 列目の背景色を変える場合、td:nth-child(odd) や td:nth-child(even) を使って列ごとに異なる背景色を設定できます。

具体例として、1列目は左寄せ、2列目は中央揃え、3列目は右揃えといったレイアウト調整と背景変更を組み合わせることができます。

テーブルのヘッダー（thead）を除外して奇数・偶数行を適用する場合

thead を含めて tr を指定すると見出し行も “行1” としてカウントされてしまうため、意図しない背景になることがあります。そうならないように tbody を使って対象を tbody 内に限定することが推奨されます。tbody がない場合でも表のヘッダーを tr:first-child や thead tr で明示的にスタイル指定して回避する方法があります。

例：
tbody tr:nth-child(odd) と tbody tr:nth-child(even) を使うことで見出し行への影響を防止でき、本文行だけを交互にスタイルできます。

奇数・偶数指定で陥りがちな誤解とトラブルシューティング

:nth-child 奇数 偶数 指定を使っていて、「うまく適用されない」ケースは意外とあります。ここでよくある誤解や落とし穴を整理し、それぞれの対処法を解説します。理解しておくことで、思わぬバグや表示不具合を防げます。

要素の種類が異なる子要素が混在する場合の影響

親要素内に異なるタグや文字ノードが混在していると、nth-child のカウントがずれる理由になります。例えば li 要素以外の要素が入っていたり、改行や空白のみのテキストノードが存在すると意図しない番号の要素が対象になってしまいます。こうした構造では :nth-of-type() を使ってタグの種類による対象限定を行う方が精度が高くなります。

display:none や非表示要素がカウントに与える影響

CSS で display:none にした要素はレンダリングされなくてもドキュメントツリーには残るため、nth-child のカウントには含まれます。そのため視覚的にスキップされたはずの行が even や odd の対象からずれてしまうことがあります。視覚と値のずれを防ぐには非表示要素を削除するか、of 構文と組み合わせて非表示を考慮する方法が有効です。

ブラウザの互換性と最新のサポート状況

:nth-child(odd) と even の指定は、モダンブラウザで長くサポートされており、現在入手可能なブラウザの大半で問題なく動作します。古いバージョンの IE（例えば IE8 以下）ではサポートが不完全ですが、それ以外では fallback を必要とするケースは稀です。CSS セレクタレベル3 の標準仕様の一部であり、動作の信頼性は高いです。

また Selectors Level 4 の仕様に含まれる of 構文なども、最新のブラウザでは対応が進んでおり、特定の要素だけをカウント対象とした指定に使えるようになっています。

応用テクニックとデザイン例まとめ

基本の使い方に慣れたら、より洗練されたデザインや応用パターンに挑戦しましょう。CSS nth-child 奇数 偶数 を活かすことで、リストのタイリング、カードレイアウト、グリッド表示など様々な UI 要素のデザイン性を上げることができます。複数の nth-child 指定を組み合わせることで交差効果を演出することも可能です。

リストアイテムで交互色やホバー効果を組み合わせる

ul や ol のリストで odd 偶数を使ってバックグラウンドを変え、さらに li:hover を加えるとポイントが視覚的に目立つデザインになります。例えば odd 行を淡い灰色、偶数行を白、hover で背景色をやや濃くすると、ユーザーのマウス移動が即反応する感覚を作れます。

カードやグリッドレイアウトでの行列指定

グリッドレイアウトやフレックスコンテナ内のアイテムにも nth-child 優れた相性があります。例えば 3列カードを水平に並べて、奇数番目のカードに異なるシャドウやマージンをつけるなどのコントラストがついたデザインが可能です。さらに 2n＋1 や 3n＋2 の式を使えば、「3つに1回だけ変える」パターンなども表現できます。

アクセシビリティと視認性を考慮した配色の選び方

背景色を交互にする際、色のコントラストが低いと視認性が下がることがあります。特にスクリーンリーダー利用や色覚異常を持つ人への配慮として、十分な明度差と彩度差を確保する配色が望ましいです。加えてフォントサイズや行間にも注意し、背景色だけでなくテキスト色の調整も忘れないことが重要です。

CSS nth-child 奇数 偶数 をさらに深く理解するためのテクニカルポイント

CSS nth-child の仕様を正しく理解すると、デザインだけでなくパフォーマンスや保守性の面で大きなメリットがあります。具体的には式の内部動作や疑似クラスの優先順位、複雑な選択子との組み合わせなど、知っておくと役立つテクニカルなポイントがあります。

式の評価と n の範囲

式 an＋b の a や b が整数であり、n が 0 以上の整数で評価されます。つまり 2n は 2×0、2×1、2×2…で計算され偶数位置のスタイルが適用されます。一方 2n+1 は 1,3,5…となり odd と同じです。式によっては negative を含む b や a の場合もあり、先頭からの範囲や末尾寄りの指定に使えるようになっています。

優先順位とセレクタの組み合わせ

:nth-child は疑似クラスであるため、他のクラス・ID・タグ指定と組み合わせるときの優先順位に注意が必要です。例えば同じ要素に普通のクラス指定と nth-child 指定がある場合、CSS の特異性ルールでどちらが勝つか見極め、必要に応じて明示的なセレクタや !important（ただし慎重に）を使うことがあります。

パフォーマンスへの影響と最適化

大量のテーブル行やリストアイテムに対して複数の nth-child 指定を多用すると、ブラウザのレンダリング負荷が若干増すことがあります。特にモバイル端末では描画性能が重要です。可能であれば指定を簡潔にまとめ、同一の親要素に対して複数ルールを重複させないように設計すると良いでしょう。

まとめ

:nth-child 疑似クラスを使うと、奇数と偶数の要素を簡単に指定でき、テーブル背景の交互色付けが非常に楽に実現できます。基本の odd や even のキーワード、数式 an＋b、タグの種類の影響、非表示要素の取り扱いなどを正しく理解すれば、デザインの幅は大きく広がります。

最新ブラウザではサポートも成熟しており、アクセシビリティや視認性を考慮した配色を選ぶことで、ユーザーにとって使いやすく見やすいデザインが可能です。多くのケースで汎用的に使えるテクニックなので、CSS での表現力を高めたい方にはぜひマスターして欲しい方法です。