【CSS Modules】:first疑似クラスの使い方

:first擬似クラスは、親要素内で最初の要素を選択するという概念を指すことがあります。しかし、標準のCSSには:firstという名前の擬似クラスは直接存在しません。これはCSSセレクタの公式仕様には定義されていません。

もしあなたが親要素内の最初の子要素、あるいは特定のタイプの最初の要素を選択したいのであれば、標準のCSSでは主に二つの擬似クラスが利用されます。一つは:first-child擬似クラス、もう一つは:first-of-type擬似クラスです。

:first-child擬似クラスは、親要素の中で最初の子要素である場合にその要素を選択します。例えば、p:first-childと記述すると、親要素の最初の子要素が<p>要素である場合にのみ、その<p>要素にスタイルが適用されます。このセレクタは、要素のタイプに関わらず、純粋に「最初の子要素である」という位置関係を重視します。

一方、:first-of-type擬似クラスは、親要素の中で、特定の要素タイプ（例えば<p>要素）を持つ兄弟要素のグループにおいて、最初に登場するその要素タイプを選択します。p:first-of-typeと記述した場合、親要素内に複数の<p>要素があったとしても、その中で最初に現れる<p>要素のみが選択対象となります。他の要素タイプの子要素は無視されます。

したがって、:firstの代わりに、実現したい目的に応じて:first-childや:first-of-typeを適切に使い分けることが重要です。これにより、意図した通りの要素にスタイルを適用し、ウェブページの見た目を正確に制御することができます。

Copy
1p:first {
2  color: blue;
3}

引数なし

引数はありません

戻り値なし

戻り値はありません