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

:nth-last-of-type()関数は、親要素の中で同じ種類の要素をグループとして見たとき、そのグループの最後から数えて指定された順番に位置する要素を選択する関数です。この関数は、特定のHTML要素（例えばp要素やli要素など）に適用され、その親要素の直下にある兄弟要素の中から、全く同じタグ名を持つ要素だけを対象として選び出します。

指定された数値や数式（例：an+b）に基づいて、末尾から順番に数え上げながら該当する要素を選択します。例えば、:nth-last-of-type(1) と指定すると、同じ種類の要素の中で最後に位置する要素が選択されます。同様に、:nth-last-of-type(2) は、最後から2番目の要素を選択します。

数式で使用する「n」は、0から始まる整数（0, 1, 2, ...）を表し、これを利用することで、一定のパターンを持つ複数の要素を効率的に選択できます。例えば、:nth-last-of-type(2n) は、最後から数えて偶数番目に位置する要素をすべて選択します。また、「odd」（奇数）や「even」（偶数）といったキーワードも使用可能で、それぞれ最後から数えて奇数番目または偶数番目の要素を選択することができます。

この関数を使用することで、ウェブページの要素にスタイルを適用する際に、その要素の種類と、親要素内での末尾からの相対的な位置に基づいて、柔軟かつ詳細な指定が可能になります。特定の種類の要素に対し、末尾からの特定のパターンでスタイルを適用したい場合に非常に有効です。

Copy
1div:nth-last-of-type(2n + 1) {}

引数なし

引数はありません

戻り値なし

戻り値はありません