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

:last-of-typeクラスは、特定の種類の要素のうち、その親要素内における最後の兄弟要素を選択するための擬似クラスです。この擬似クラスを使用することで、同じ親要素を持つ子要素の中で、指定された要素タイプ（例えばp要素やdiv要素など）の最後の出現箇所のみにスタイルを適用できます。

具体的には、ある親要素の中に複数の同じ種類の要素（例: pタグが複数）が存在する場合、:last-of-typeはそれらのpタグの中から一番最後に書かれたpタグを選択します。これは、要素の型に着目して最後の要素を特定するため、途中に別の種類の要素（例: spanタグなど）が挟まっていても関係ありません。

よく似た擬似クラスに:last-childがありますが、これとは選択の基準が異なります。:last-childが親要素内の「全ての兄弟要素の中で単純に一番最後にある要素」を選択するのに対し、:last-of-typeは親要素内の「指定した要素タイプの中で一番最後にある要素」を選択します。例えば、親要素の最後が<span>要素であっても、:last-of-typeでp要素を選択すれば、その親要素内の最後のp要素が選択されます。

このように:last-of-typeは、特定の要素タイプに限定して最後の要素にスタイルを適用したい場合に非常に役立ちます。例えば、記事の最後の段落に特別な装飾を施したり、リストの最後の項目にだけ罫線を付けたりするような状況で利用されます。この機能により、HTML構造に依存しすぎず、より柔軟なCSSの記述が可能になります。

Copy
1p:last-of-type {
2  color: blue;
3}

引数なし

引数はありません

戻り値なし

戻り値はありません