CSSで奇数・偶数を指定する「nth-child」の使い方を徹底解説！
Webページのデザインを整えるとき、「テーブルの行を1行おきに色分けしたい」「リストの要素を交互に並べ替えたい」と思うことは多々あると思います。
CSSには、そんな場面にぴったりの「nth-child」というセレクタが用意されています。今回は、使いこなせるとデザインの幅がぐっと広がる「nth-child」について解説します。
CSSで奇数・偶数の要素を指定する方法：基本の書き方
CSSで奇数・偶数の要素を指定するには、「nth-child」擬似クラスに「odd」または「even」というキーワードを渡すだけです。たとえばリストの奇数行だけ背景色を変えたい場合、たった1行のCSSで実現できます。
まずはoddとevenそれぞれの意味と書き方を押さえておきましょう。
- odd：1番目、3番目、5番目…という奇数番目の要素を指す
- even：2番目、4番目、6番目…という偶数番目の要素を指す
どちらも英語の「奇数（odd number）」「偶数（even number）」から来ているので、意味と紐づけると覚えやすくなります。
奇数（1, 3, 5…番目）を指定する：odd
nth-child(odd) を使うと、親要素の中で奇数番目にあたる子要素をまとめて指定できます。以下は、リスト項目の奇数行に背景色を設定する例です。
<style>
body {
font-family: sans-serif;
padding: 40px;
background-color: #f9f9f9;
}
h2 {
font-size: 1.2rem;
margin-bottom: 12px;
color: #333;
}
ul {
list-style: none;
padding: 0;
margin: 0;
border: 1px solid #ddd;
border-radius: 6px;
overflow: hidden;
max-width: 400px;
}
li {
padding: 12px 16px;
color: #333;
background-color: #ffffff;
}
/* 奇数番目の行に背景色を適用 */
li:nth-child(odd) {
background-color: #155724;
color: #ffffff;
}
</style>
</head>
<body>
<h2>li:nth-child(odd) のデモ</h2>
<ul>
<li>1番目の項目（奇数）</li>
<li>2番目の項目（偶数）</li>
<li>3番目の項目（奇数）</li>
<li>4番目の項目（偶数）</li>
<li>5番目の項目（奇数）</li>
<li>6番目の項目（偶数）</li>
</ul>
</body>
実行結果：
このように書くと、1番目・3番目・5番目…の <li> に緑色の背景が適用されます。テーブルやカード一覧など、要素が縦に並ぶ場面で特に重宝するコードです。
「なんか今の仕事合わないな・・・」
「IT業界に転職してみたいなぁ・・・」
という方、DMMが運営する「WEBCAMP エンジニア転職」をご検討してみてはいかがですか？
「WEBCAMP エンジニア転職」では最短12週間でITエンジニアを目指すことが可能です！
WEBCAMPの卒業生は転職後に年収もUP！（例：年収250万円→500万円）
しかも今なら受講料の最大70%が給付金として支給されます。
DMM WEBCAMPは経済産業省・厚生労働省が認定した専門実践教育訓練給付金制度の対象です
偶数（2, 4, 6…番目）を指定する：even
一方、nth-child(even) を使えば、偶数番目の要素だけをまとめてスタイリングできます。先ほどのoddと組み合わせると、1行おきに色が切り替わる縞模様のデザインが完成します。
<style>
body {
font-family: sans-serif;
padding: 40px;
background-color: #f9f9f9;
}
h2 {
font-size: 1.2rem;
margin-bottom: 12px;
color: #333;
}
ul {
list-style: none;
padding: 0;
margin: 0;
border: 1px solid #ddd;
border-radius: 6px;
overflow: hidden;
max-width: 400px;
}
li {
padding: 12px 16px;
color: #333;
}
/* 奇数行：白 */
li:nth-child(odd) {
background-color: #ffffff;
color: #333;
}
/* 偶数行：緑 */
li:nth-child(even) {
background-color: #155724;
color: #ffffff;
}
</style>
</head>
<body>
<h2>li:nth-child(odd) と li:nth-child(even) のデモ</h2>
<ul>
<li>1番目の項目（奇数）</li>
<li>2番目の項目（偶数）</li>
<li>3番目の項目（奇数）</li>
<li>4番目の項目（偶数）</li>
<li>5番目の項目（奇数）</li>
<li>6番目の項目（偶数）</li>
</ul>
</body>実行結果：
シンプルな記述でありながら、ユーザビリティの向上に直結するので、ぜひ覚えておきたいところです。
【実務で使える】奇数・偶数指定の活用シーン3選
oddとevenの書き方を覚えたら、次は実際の制作現場でどう活かすかが重要です。ここでは「実務で使える奇数・偶数指定の活用シーン」を3つ取り上げます。
コードをそのまま流用できるよう、具体例を交えながら解説していきます。
テーブル（表）を縞模様にして読みやすくする
データが多い表は、行の区切りが分かりにくいと読み間違いのもとになります。そこでよく使われるのが、1行おきに背景色を変える「ゼブラストライプ」と呼ばれるデザインです。
<style>
body {
font-family: sans-serif;
padding: 40px;
background-color: #f9f9f9;
}
h2 {
font-size: 1.2rem;
margin-bottom: 12px;
color: #333;
}
table {
border-collapse: collapse;
width: 100%;
max-width: 600px;
background-color: #ffffff;
border: 1px solid #ddd;
border-radius: 6px;
overflow: hidden;
}
thead tr {
background-color: #333333;
color: #ffffff;
}
th, td {
padding: 12px 16px;
text-align: left;
border-bottom: 1px solid #ddd;
}
/* 偶数行にゼブラストライプ */
tbody tr:nth-child(even) {
background-color: #f5f5f5;
}
</style>
</head>
<body>
<h2>tr:nth-child(even) のデモ（ゼブラストライプ）</h2>
<table>
<thead>
<tr>
<th>名前</th>
<th>役職</th>
<th>部署</th>
</tr>
</thead>
<tbody>
<tr>
<td>山田 太郎</td>
<td>エンジニア</td>
<td>開発部</td>
</tr>
<tr>
<td>佐藤 花子</td>
<td>デザイナー</td>
<td>制作部</td>
</tr>
<tr>
<td>鈴木 一郎</td>
<td>マネージャー</td>
<td>営業部</td>
</tr>
<tr>
<td>田中 次郎</td>
<td>ライター</td>
<td>広報部</td>
</tr>
<tr>
<td>高橋 三郎</td>
<td>アナリスト</td>
<td>企画部</td>
</tr>
<tr>
<td>伊藤 四郎</td>
<td>サポート</td>
<td>CS部</td>
</tr>
</tbody>
</table>
</body>実行結果：
<tr> に対して nth-child(even) を指定するだけで、偶数行にまとめて色が入ります。ヘッダー行（<thead>）が別タグになっている場合は自動的にカウントから外れるため、意図しない行に色がついてしまう心配もありません。
視認性を高めるシンプルな一手として、実務でも頻繁に使われるテクニックです。
リストのレイアウトを交互に入れ替える
サービス紹介ページなどでよく見かける「画像とテキストが左右交互に並ぶレイアウト」も、nth-childを使えばすっきり書けます。
<style>
body {
font-family: sans-serif;
padding: 40px;
background-color: #f9f9f9;
max-width: 800px;
margin: 0 auto;
}
h2 {
font-size: 1.2rem;
margin-bottom: 24px;
color: #333;
}
.card {
display: flex;
align-items: center;
gap: 24px;
background-color: #ffffff;
border: 1px solid #ddd;
border-radius: 8px;
padding: 24px;
margin-bottom: 16px;
}
.card__image {
width: 200px;
height: 140px;
border-radius: 6px;
flex-shrink: 0;
object-fit: cover;
}
.card__text { flex: 1; }
.card__text h3 {
font-size: 1.1rem;
margin: 0 0 8px;
color: #155724;
}
.card__text p {
font-size: 0.9rem;
color: #555;
line-height: 1.7;
margin: 0;
}
.card:nth-child(odd) .card__image { order: 1; }
.card:nth-child(odd) .card__text { order: 2; }
.card:nth-child(even) .card__image { order: 2; }
.card:nth-child(even) .card__text { order: 1; }
</style>
</head>
<body>
<h2>nth-child を使った画像・テキスト交互レイアウトのデモ</h2>
<div class="card">
<img class="card__image" src="任意の画像" alt="サービス画像1">
<div class="card__text">
<h3>サービス紹介 01</h3>
<p>奇数番目のカードは画像が左、テキストが右に配置されます。HTMLの順番はどのカードも同じですが、CSSのorderプロパティで見た目だけを切り替えています。</p>
</div>
</div>
<div class="card">
<img class="card__image" src="任意の画像" alt="サービス画像2">
<div class="card__text">
<h3>サービス紹介 02</h3>
<p>偶数番目のカードはテキストが左、画像が右に切り替わります。nth-childとFlexboxを組み合わせるだけで、こうした交互レイアウトをシンプルに実現できます。</p>
</div>
</div>
<div class="card">
<img class="card__image" src="任意の画像" alt="サービス画像3">
<div class="card__text">
<h3>サービス紹介 03</h3>
<p>3番目は再び画像が左に戻ります。カードを追加しても自動的に交互になるため、運用時にHTMLを書き換える必要がありません。</p>
</div>
</div>
<div class="card">
<img class="card__image" src="任意の画像" alt="サービス画像4">
<div class="card__text">
<h3>サービス紹介 04</h3>
<p>4番目も自動的にテキストが左、画像が右になります。コンテンツの増減に柔軟に対応できる、実務でもよく使われるレイアウトパターンです。</p>
</div>
</div>
</body>実行結果：
Flexboxの order プロパティと組み合わせることで、HTMLの構造を変えることなく見た目だけを交互に切り替えられます。コンテンツの追加・削除にも柔軟に対応できるので、運用しやすいコードになります。
3番目おき、n番目など高度な指定（2n+1など）
oddとevenはあくまで「2つおき」の指定ですが、nth-childには数式を使ったより柔軟な指定方法もあります。書き方は An+B という形式で、Aが間隔、Bが開始位置を表します。
/* 3番目おきに指定（3、6、9番目…） */
li:nth-child(3n) {
border-bottom: 1px solid #ccc;
}
/* 奇数番目をoddではなく数式で書く場合 */
li:nth-child(2n+1) {
background-color: #f0f0f0;
}
/* 4番目以降の要素をすべて指定 */
li:nth-child(n+4) {
display: none;
}
たとえば n+4 と書くと「4番目以降をすべて非表示」という指定になるため、初期表示では3件だけ見せて「もっと見る」ボタンで残りを出すUIにも応用できます。
oddとevenだけでは対応しきれない場面で、この数式表記を覚えておくと一気に表現の幅が広がります。
初心者が挫折しやすいCSSの学習法とは？DMM WEBCAMPがおすすめ
nth-childのような記述は慣れてしまえば難しくはありませんが、独学で学ぼうとすると思わぬところで詰まってしまうのも事実です。「コードは書けてるのに、なぜか意図した要素に反映されない」「どこが間違っているのか見当もつかない」といった状況は、CSSを学び始めた多くの人が経験するものです。
中でも独学の場合だと、疑問が生じたときに質問できる相手がいないため、一つのエラーで数時間足止めされることも珍しくありません。そのまま行き詰まり、学習を断念してしまうケースも多く見受けられます。
こうした壁を乗り越えるために、プログラミングスクールを活用するという方法があります。なかでもDMM WEBCAMP エンジニア転職の短期集中コースは、最短3ヶ月でプロのITエンジニアへの転職を目指せるカリキュラムを提供しています。
現役エンジニアのメンターによるビデオチャット質問ができる環境なので、「なぜそうなるのか」という理由だけでなく、考え方ごと身につけられるのが大きな特徴です。
また、独学ではなかなか経験できない、受講者同士でチームを組んで実際にWebサービスを開発する「チーム開発」の環境も用意されています。
CSSの基礎を確実に固めながら、エンジニアとしてのキャリアを本格的に歩み始めたいという方は、一度無料カウンセリングを利用してみてはいかがでしょうか。
まとめ：CSSの奇数・偶数指定をマスターしてデザインの幅を広げよう
今回はnth-childを使った奇数・偶数指定の基本から、実務で即使えるテクニック、さらに数式を使った応用的な指定方法まで解説しました。oddとevenという直感的なキーワードから始まり、2n+1 のような数式表記まで使いこなせるようになると、デザインの自由度が一段と広がります。
必要な場面で、今回学んだコードがすぐに浮かぶようになれば、CSSの習熟度は確実に上がっています。さらにステップアップを目指したい方には、DMM WEBCAMPの無料カウンセリングを利用してみることをおすすめします。
CSSの知識を土台にしつつ、プロのエンジニアとして活躍するための道筋を一緒に考えていきましょう。
nth-childを使用する際の注意点とトラブルシューティング
nth-childは非常に便利なセレクタですが、「書いたのに効かない」「意図しない要素にスタイルが当たる」という状況も起きやすいのも事実です。ここでは、つまずきやすいポイントを整理して解説します。
nth-of-typeとの違い：どちらを使うべき？
nth-childとよく混同されるのが nth-of-type です。どちらも「何番目の要素を指定する」という点では同じですが、カウントの基準が異なります。
| 比較項目 | nth-child | nth-of-type |
| カウントの基準 | 親要素の中の全子要素 | 同じタグの要素のみ |
| 異なるタグが混在する場合 | 影響を受ける | 影響を受けない |
| 用途 | 同じタグが並ぶ構造に向いている | 複数種類のタグが混在する構造に向いている |
たとえば、以下のようなHTMLがある場合を考えてみましょう。
<div>
<h2>見出し</h2>
<p>テキスト1</p>
<p>テキスト2</p>
<p>テキスト3</p>
</div>この構造に対して
p:nth-child(2)と書いた場合、<h2> も1番目の子要素としてカウントされるため、「テキスト1」が指定されます。
一方、
p:nth-of-type(2)と書くと <p> だけを数えるため、「テキスト2」が指定されます。
同じタグだけが並ぶリストやテーブル行にはnth-childが、異なるタグが混在する構造にはnth-of-typeが向いています。
指定が効かない時のチェックリスト
もしnth-childを使ってもスタイルが反映されない場合、以下の点を順番に確認してみてください。
- セレクタの書き方が正しいか
- HTML構造が意図通りになっているか
- CSSの優先順位（詳細度）が低くなっていないか
- ブラウザキャッシュが残っていないか
①：セレクタの書き方が正しいか
li :nth-child(2)のように、liのあとにスペースが入っていると、「<li> の子孫要素の2番目」という全く異なる意味になります。
li:nth-child(2)このようにスペースなしで書くのが正しい形です。
css/* 誤り：liの子孫要素を指定してしまう */
li :nth-child(2) { color: red; }
/* 正しい：liの2番目を指定する */
li:nth-child(2) { color: red; }
②：HTML構造が意図通りになっているか
nth-childは「親要素から見た子要素の順番」でカウントします。
指定した要素の親が何かをブラウザの開発者ツールで確認し、カウントのずれが起きていないか見直してみましょう。
③：CSSの優先順位（詳細度）が低くなっていないか
他のCSSルールに上書きされている可能性があります。
開発者ツールでスタイルを確認し、打ち消し線が入っているプロパティがあれば、より詳細度の高いセレクタで書き直すか、記述順を見直してみましょう。
④：ブラウザキャッシュが残っていないか
コードを修正したのに変化が見られない場合、古いCSSファイルがキャッシュされている可能性があります。
強制リロード（Windowsなら Ctrl + Shift + R、Macなら Cmd + Shift + R）を試してみましょう。
