疑似クラス nth-child

CSS の :nth-child 擬似クラス

:nth-child 擬似クラス

:nth-child() CSS 擬似クラスは、親要素の n 番目の 자식 요소와 일치하며 요소의 유형은 고려하지 않습니다. n は、特定の数値、キーワード、または式にすることができます。

構文

:nth-child( <nth> )

値 説明
n 1 から始まるカウンターを表す変数 (つまり、要素のインデックス)
odd 奇数番目の要素を選択します。
even 偶数番目の要素を選択します。
an + b a と b は整数です。
  • a は、選択する要素のパターン内のステップ値です。
  • b はオフセット値です。

例

  • リスト内のすべての要素を選択します。
    • 
    li:nth-child(n) {
      /* スタイル */
    }
  • リスト内の奇数番目の要素を選択します。
    • 
    li:nth-child(odd) {
      /* スタイル */
    }
  • リスト内の最初の 3 つの要素を選択します。
    • 
    li:nth-child(-n+3) {
      /* スタイル */
    }

注意点

  • :nth-child 擬似クラスセレクターは 1 からカウントを開始します。
  • :nth-child 擬似クラスセレクターは、特定の種類の要素だけでなく、あらゆる種類の要素を選択できます。
  • :nth-child 擬似クラスセレクターは、他のセレクターと組み合わせて使用​​して、より複雑な選択ルールを作成できます。

ブラウザの互換性

すべての主要なブラウザで :nth-child 擬似クラスセレクターがサポートされています。

関連情報

よくある質問

:nth-child と :nth-of-type の違いは何ですか?

:nth-child は親要素内のすべての要素をカウントしますが、:nth-of-type は指定された型の要素のみをカウントします。

:nth-child 擬似クラスセレクターを使用して、最後の要素を選択するにはどうすればよいですか?

:last-child 擬似クラスセレクターを使用します。

:nth-child 擬似クラスセレクターを使用して、特定の範囲の要素を選択するにはどうすればよいですか?

複数の :nth-child セレクターを組み合わせるか、:nth-child(an + b) 構文を使用できます。

その他の参考記事:CSS 疑似クラス