CSS :nth-child() セレクター — パターンベースの要素選択
An+B構文を使用したパターンベース選択のCSS :nth-child()セレクターをマスターします。ストライプテーブル、グリッドレイアウト、複雑な繰り返しパターンを作成します。
Pseudo-classes
詳細な説明
CSS :nth-child() セレクター
:nth-child()疑似クラスは、兄弟間での位置に基づいて、数式ベースのパターンで要素を選択します。
構文：An+B
An+Bの数式でパターンを定義します：
- A — サイクルサイズ（A番目ごとの要素）
- B — オフセット（開始位置）
- n — 0から始まるカウンター
よく使われる数式
| セレクター | マッチ |
|---|---|
:nth-child(odd) |
1番目、3番目、5番目…（2n+1のエイリアス） |
:nth-child(even) |
2番目、4番目、6番目…（2nのエイリアス） |
:nth-child(3) |
3番目の子のみ |
:nth-child(3n) |
3の倍数：3、6、9… |
:nth-child(-n+3) |
最初の3要素のみ |
実践例
ストライプテーブル行:
tr:nth-child(even) {
background-color: #f5f5f5;
}
:nth-child() と :nth-of-type() の違い
:nth-child()はタイプに関係なくすべての兄弟をカウントしますが、:nth-of-type()は同じタグ名の兄弟のみをカウントします。
ユースケース
:nth-child()セレクターはWeb開発において至る所で使用されています。読みやすさのためのストライプテーブル行の作成、グリッドレイアウトパターンの実装、リスト内の表示アイテム数の制限、回転する配色の作成、リストの最後のアイテムの間隔処理、異なるカラム配置のレスポンシブギャラリーレイアウトに活用されています。