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

:nth-of-type()クラスは、親要素内において、同じ種類の兄弟要素の中から特定の順番にある要素を選択するためのCSS擬似クラスを表すクラスです。この擬似クラスは、HTML要素のタイプ（例：<p>要素、<li>要素など）に焦点を当て、そのタイプの中で何番目に出現するかという基準で要素を選択します。例えば、複数の段落（<p>タグ）がある場合に、その中から2番目の段落だけを選んだり、すべてのリストアイテム（<li>タグ）の中から偶数番目のものだけを選んだりする際に利用されます。

引数には、数学的な式として「an+b」形式、またはキーワードとして「odd（奇数番目）」や「even（偶数番目）」を指定します。「an+b」形式では、aは増分（ステップ数）を示す整数で、nは0から始まる整数（0, 1, 2, ...）を意味します。bはオフセット（開始位置）を示す整数です。例えば、p:nth-of-type(2n+1)と記述すると、すべてのp要素の中から1番目、3番目、5番目…と奇数番目のp要素にスタイルが適用されます。li:nth-of-type(even)と記述すれば、すべてのli要素の中から2番目、4番目、6番目…と偶数番目のli要素が選択されます。

このセレクタは、テーブルの行に交互の背景色を設定するストライプ表示や、リストアイテムの一部に特別な装飾を施すなど、要素の並び順に基づいて動的なデザインを実現する際に非常に有用です。HTMLの構造を変更することなく、CSSだけで柔軟なスタイリングが可能となり、Webページの視認性やメンテナンス性を向上させることができます。

Copy
1element:nth-of-type(an+b | even | odd) {
2  /* プロパティ: 値; */
3}

引数なし

引数はありません

戻り値なし

戻り値はありません