【CSS Modules】:nth-child疑似クラスの使い方

`:nth-child()クラスは、親要素の中にある複数の子要素のうち、特定の順番（位置）にある要素を選択するために使用される、CSSの擬似クラスです。このセレクターは、Webページのデザインにおいて、要素が持つ構造的な位置関係に基づいてスタイルを適用する強力な機能を提供します。

このクラスは、引数として an+b という形式の数式、または odd や even といったキーワードを受け取ります。数式 an+b において、n は0から始まる整数（0, 1, 2, ...）を表し、a は子要素を数えるステップ（間隔）を指定し、b は数え始めるオフセット（開始位置）を指定します。例えば、:nth-child(2n+1) を使用すると、親要素内の1番目、3番目、5番目といった奇数番目の子要素が選択され、:nth-child(2n) を使用すると、2番目、4番目、6番目といった偶数番目の子要素が選択されます。キーワードである odd は :nth-child(2n+1) と同じく奇数番目の要素を、even は :nth-child(2n) と同じく偶数番目の要素を選択する、より簡潔な記述方法として提供されています。

この機能は、連続して並ぶリストやテーブルの項目に、交互に異なる背景色を適用する「ストライプ表示」のような、視覚的な区別を設けるデザインの実装に非常に役立ちます。また、特定の数番目の要素にだけ特別なスタイルを適用するなど、デザインの柔軟性を大幅に向上させることが可能です。:nth-child()は、子要素のタグ名や種類にかかわらず、親要素内のすべての子要素を対象として順番に数え上げるため、HTMLの構造を基にした精密なスタイリングを実現できます。

Copy
1li:nth-child(2n+1) {
2  background-color: #f0f0f0;
3}

引数なし

引数はありません

戻り値なし

戻り値はありません