CSSのnth-childセレクタの使い方【初心者向け】

:nth-childとは？繰り返しスタイルを自在に適用

「テーブルの偶数行だけ色を変えたい」「3番目の要素だけスタイルを変えたい」「最初の3つだけ目立たせたい」——こんなとき、いちいちクラスを付けるのは面倒ですよね。

CSSの :nth-child()（エヌスチャイルド） を使えば、クラスを追加せずに「何番目の要素か」でスタイルを当てられます。

この記事では、:nth-childの書き方パターンを覚えて、繰り返しスタイルを自在に適用できるようになることを目指します。

基本構文：:nth-child(An+B)

セレクター:nth-child(数式) {
  /* スタイル */
}

数式は An+B の形で書きます。

• A = 繰り返し間隔（何個おきか）
• n = 0, 1, 2, 3... と増える変数
• B = 開始位置（何番目から始めるか）

よく使うパターン一覧

:nth-child vs :nth-of-type の違い

:nth-child(2) は「親の2番目の子要素」を選びます。一方 :nth-of-type(2) は「その要素タイプの2番目」を選びます。

/* <div> <span>A</span> <p>B</p> <p>C</p> </div> */

p:nth-child(2) { }     /* <p>B</p> — 親の2番目の子がpなので選ばれる */
p:nth-of-type(2) { }   /* <p>C</p> — p要素の中で2番目 */

混同しやすいので、迷ったら:nth-of-typeを使うのが安全です。擬似クラス全般についてはCSS擬似クラス完全解説を参照してください。

実践コード例①：テーブルのストライプ（偶数行に背景色）

table {
  width: 100%;
  border-collapse: collapse;
}

th, td {
  padding: 12px 16px;
  text-align: left;
  border-bottom: 1px solid #e5e7eb;
}

th {
  background-color: #0d9488;
  color: white;
}

/* 偶数行にうすい背景色 */
tbody tr:nth-child(even) {
  background-color: #f0fdfa;
}

/* ホバーで行をハイライト */
tbody tr:hover {
  background-color: #ccfbf1;
}

テーブルのストライプは:nth-childの最も定番の使い方です。:hoverで動きをつける方法と組み合わせると、さらに見やすくなります。

実践コード例②：カードグリッドで3の倍数だけ大きく表示

.card-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

.card-grid .card {
  padding: 20px;
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}

/* 3の倍数番目のカードを2列分の幅にする */
.card-grid .card:nth-child(3n) {
  grid-column: span 2;
  background-color: #f0fdfa;
  border: 2px solid #0d9488;
}

グリッドレイアウトとの組み合わせについてはCSSグリッドレイアウト入門も参考にしてください。

実践コード例③：最初の3件だけ「NEW」バッジ風スタイル

.article-list .article {
  padding: 16px;
  border-bottom: 1px solid #e5e7eb;
}

/* 最初の3つだけ目立たせる（-n+3 = 1,2,3） */
.article-list .article:nth-child(-n+3) {
  background-color: #fffbeb;
  border-left: 4px solid #f59e0b;
}

/* 最初の3つのタイトルの前に「NEW」を表示 */
.article-list .article:nth-child(-n+3) .title::before {
  content: "NEW ";
  color: #f59e0b;
  font-weight: bold;
  font-size: 0.75rem;
}

-n+3 は「3以下の番号」を意味します。nに0,1,2...を代入すると 3,2,1,0... となり、0以下は無視されるため1〜3が選ばれます。

:nth-last-child — 後ろから数える

/* 最後から2番目 */
li:nth-last-child(2) {
  color: #6b7280;
}

/* 最後の3つ */
li:nth-last-child(-n+3) {
  opacity: 0.7;
}

:nth-last-child() は後ろから数えるバージョンです。書き方は:nth-childと同じです。

よくある間違い・注意点

❌ :nth-child(2)は「2番目のその要素」ではない

p:nth-child(2) は「親の2番目の子要素がpなら選ぶ」という意味です。2番目の子要素がpでなければ何も選ばれません。「p要素の中で2番目」を選びたい場合は p:nth-of-type(2) を使います。

❌ An+Bの計算で0以下は無視される

:nth-child(-n+3) でnに4を代入すると -4+3 = -1 になりますが、0以下の結果は無視されます。だから1,2,3だけが選ばれます。

:nth-childの詳細度

:nth-child()の詳細度はクラスセレクターと同じ10です。詳しくはCSS詳細度の解説を確認してください。

ブラウザ対応状況

:nth-child() は全モダンブラウザで対応しています。:nth-child(of selector)（セレクタ付き）はChrome・Safariで対応済みです。

まとめ

odd/evenとAn+Bパターンを覚えれば大半のケースに対応できます。セレクタの基本はCSSセレクターの使い方で復習できます。実践で試したい場合はCSS練習問題に挑戦してみてください。CSSの基礎全体はCSSとは？初心者向け解説で学べます。

関連記事

• CSS擬似クラス完全解説 — 擬似クラス全体を復習
• CSSセレクターの使い方 — セレクタの基本
• CSS詳細度の解説 — nth-childの詳細度
• CSSグリッドレイアウト入門 — グリッドとの組み合わせ
• CSS練習問題 — 実践でnth-childを活用