【CSS Modules】:first-child疑似クラスの使い方
:first-child疑似クラスの使い方について、初心者にもわかりやすく解説します。
作成日: 更新日:
基本的な使い方
:first-childクラスは、親要素の中で最初に登場する子要素を表すクラスです。これは、HTML要素の構造において、ある要素がその親要素の直下にある多くの子要素のうち、一番先頭に位置する場合に適用されるCSSの「擬似クラス」と呼ばれるものです。通常のクラスセレクタとは異なり、HTMLにclass属性を記述することなく、要素の構造的な位置に基づいてスタイルを適用できる点が特徴です。
例えば、ウェブページでリスト（<ul>要素や<ol>要素）を作成した際、最初のリストアイテム（<li>要素）だけ異なるスタイルにしたい場合にli:first-childのように指定します。これにより、最初の<li>要素だけに特定の背景色や文字色を設定するといったことが可能です。
p:first-childと記述すれば、親要素内で最初の段落要素（<p>要素）のみを選択できます。ただし、その<p>要素が親要素の「最初の子要素」でなければ選択されません。例えば、親要素の最初の子要素が<h1>で、その次に<p>がある場合、その<p>は:first-childでは選択されず、h1:first-childが適用されます。
この:first-childは、ウェブサイトのナビゲーションメニューや記事一覧など、共通の要素が連続して並ぶセクションで特定の項目を目立たせたい場合などに非常に役立ちます。CSSセレクタの基本的な知識として、システム開発においてもユーザーインターフェースの表現力を高めるために重要な概念です。
公式リファレンス: :first-child
構文(syntax)
1selector:first-child { 2 /* プロパティ: 値; */ 3}
引数(parameters)
引数なし
引数はありません
戻り値(return)
戻り値なし
戻り値はありません