CSSでn個ごとの要素を狙う

表の縞模様、3枚ごとのカードの回り込み解除、末尾要素の装飾。nth-childのパターンを24項目のプレビュー付きで組み立てます。

このガイドで使う道具

:nth-child()は位置で選択します。縞模様の奇数/偶数、3枚ごとの3n、5番目の5、等差のan+b、「3〜7番目」の範囲。試行錯誤で合わせるのは遅いので、プレビューが一致を即座に示します。

パターン種別を選んでから擬似クラスを選びます。nth-childは全兄弟を数え、nth-of-typeは同じタグの兄弟、nth-last-childは末尾から数えます。24個の番号付きグリッドがセレクタの命中を示します。

2番目から3個ごとなら式 a=3, b=1 で :nth-child(3n+1)。1, 4, 7, 10…に一致します。「末尾3要素」はnth-last-childの範囲モードで、24個中22〜24が点灯します。

ビルダーは一般的な形（奇数・偶数・n・番号・an+b・範囲）をカバーしますが、:nth-child本来はAn+B of S構文なども受けます。番号1〜10,000・係数±1,000までです。