nth-childの使い方完全ガイド｜cssで何番目を指定する方法

はじめに

CSSで特定の要素だけにスタイルを適用したいときに活躍するのがnth-childです。しかし、nth-of-typeとの違いや数式の書き方が曖昧なままでは、意図しない挙動が発生することも少なくありません。

本記事ではnth-childの基本構文から応用的な使い方、nth-of-typeとの違い、実務でよくある失敗例までを体系的に解説します。初心者でも理解でき、現場でそのまま使える知識として整理しています。

nth-childとは何か

基本構文と書き方

nth-childは、親要素の中にある子要素の「順番」に基づいてスタイルを適用するCSS疑似クラスです。基本構文は以下の通りです。

selector:nth-child(n) {
  プロパティ: 値;
}

ここでの「n」は対象となる要素の順番を意味します。例えば、以下の指定は3番目のli要素にのみ適用されます。

li:nth-child(3) {
  color: red;
}

このように、HTML構造上の順番を基準にスタイルを制御できる点が特徴です。

cssで何番目を指定する仕組み

nth-childは「親要素から見た子要素の通し番号」で判定されます。重要なのは、同じタグ名かどうかではなく、すべての子要素をカウント対象にする点です。

例えば以下の構造を考えます。

<ul>
  <li>1</li>
  <p>2</p>
  <li>3</li>
</ul>

この場合、2番目の子要素は<p>であり、li:nth-child(2)は適用されません。3番目の<li>に対してはli:nth-child(3)が適用されます。

つまり、nth-childは「タグの種類」ではなく「位置」で判断する仕組みです。

odd・evenの使い方

nth-childでは、数値以外にoddやevenも使用できます。

tr:nth-child(even) {
  background-color: #f5f5f5;
}

oddは奇数番目、evenは偶数番目を指します。テーブルの縞模様（ストライプデザイン）や、リストの視認性向上に頻繁に用いられます。可読性を高めるUI設計において非常に実用的な指定方法です。

nth-child 使い方の基本パターン

特定の番号を指定する方法

最も基本的な使い方は、特定の番号を直接指定する方法です。

div:nth-child(1) { }
div:nth-child(4) { }

この方法は、レイアウトの一部だけを装飾したい場合に有効です。ただし、HTML構造が変更されると番号も変わるため、保守性には注意が必要です。

数式（an+b）の考え方

nth-childは「an+b」という数式で繰り返しパターンを指定できます。

li:nth-child(2n) { }   /* 2, 4, 6, 8... */
li:nth-child(3n+1) { } /* 1, 4, 7, 10... */

この仕組みにより、一定間隔でスタイルを適用できます。グリッドレイアウトやカード型UIで特定の列のみ装飾する場合などに有効です。

複数要素への繰り返し指定

例えば、3列レイアウトで右端だけに余白を付けない場合は次のように指定します。

.card:nth-child(3n) {
  margin-right: 0;
}

このように、繰り返し構造を前提としたデザイン設計においてnth-childは大きな効果を発揮します。

nth-of-typeとの違い

nth-childとの挙動比較

nth-of-typeは「同じタグ名の中での順番」を基準にします。

li:nth-of-type(2)

これは、同じ親要素内にあるli要素の中で2番目のものを指定します。pタグなどはカウントに含まれません。一方、nth-childはすべての子要素をカウント対象にします。この違いが、意図しないスタイル適用の原因になることがあります。

使い分けの判断基準

判断基準は明確です。HTML構造全体の順番で制御したい場合はnth-child、特定タグ内だけで順番を制御したい場合はnth-of-typeを選びます。

実務では、構造変更に強いnth-of-typeの方が安全なケースも多く、状況に応じて選択することが重要です。

実務でよくある失敗例と対処法

意図通りに適用されない原因

最も多い原因は、HTML構造の誤認識です。開発者がliだけを数えていても、実際には別タグが間に挟まっている場合があります。

また、JavaScriptによるDOM変更が影響することもあります。開発者ツールで実際の構造を確認することが重要です。

HTML構造との関係

nth-childはDOM構造に強く依存します。そのため、設計段階で以下を意識することが基本方針です。

• 不要なタグを挿入しない
• 構造をシンプルに保つ
• クラス設計と併用する

構造が複雑な場合は、無理にnth-childだけで制御せず、クラス付与を併用する方が安全です。

応用テクニックと実践例

テーブルやリストへの応用

テーブルの縞模様や、ナビゲーションメニューの区切り線などに活用できます。

例えば、下記のように書くとliタグの1つ目以外に対してスタイル指定をすることができます。 notを使うと、「それ以外」というような指定になるのです。

li:not(:nth-child(1)) {
  border-left: 1px solid #ccc;
}

このように、疑似クラスと組み合わせることで高度な指定も可能です。

レスポンシブデザインでの活用

レスポンシブ環境では、列数が変わるケースがあります。

@media (max-width: 768px) {
  .card:nth-child(2n) {
    margin-right: 0;
  }
}

画面幅に応じてnth-childの指定を変更することで、柔軟なレイアウト設計が可能になります。

パフォーマンスを意識した設計

nth-child自体は大きな負荷をかけるものではありませんが、深い階層で多用すると可読性が低下します。保守性の高いスタイル設計のために、以下の点を意識しましょう。

• セレクタを簡潔に保つ
• 過度に複雑な数式を避ける
• クラス設計と併用する

これらを徹底することで、長期的に管理しやすいCSS設計が実現できます。

まとめ

nth-childは、CSSで「何番目か」を指定できる強力な疑似クラスです。基本構文、odd・even指定、an+bの数式理解、そしてnth-of-typeとの違いを正しく把握することで、実務レベルで自在に使いこなせます。

特に重要なのは、HTML構造との関係を理解したうえで設計することです。構造依存の特性を踏まえ、適切に使い分けることで、保守性の高いスタイル設計が可能になります。

より実践的にCSS設計力を高めたい方には、体系的にWeb制作スキルを学べる WEBMASTERS がおすすめです。基礎から応用まで段階的に学べる環境を活用することで、確実にスキルを定着させることができます。