:first-of-type

ファーストオブタイプ（セレクタ）

意味特定の要素の兄弟要素の中で最初のタイプの要素

:first-of-typeとは？

:first-of-type疑似クラスは、指定された要素の兄弟要素の中で、そのタイプ（例えば、pやdivなどの要素）が最初に現れる要素を選択するために使用します。

:first-of-typeの具体的な使い方

同じ要素タイプの最初の要素にスタイルを適用する例

<style>
  p:first-of-type {
    font-weight: bold;
  }
</style>

<div>
  <p>最初の段落</p>
  <p>2番目の段落</p>
</div>

各ブロック内で最初に現れるp（段落）要素のテキストを太字に設定します。

:first-of-typeに関するよくある質問

Q. :first-of-typeの基本的な使い方は？

A. :first-of-typeは、親要素内で指定した要素タイプの最初の要素を選択するCSSセレクタです。例えば、p:first-of-typeは、親要素内の最初のp要素を選択します。

Q. :first-childとの違いは何ですか？

A. :first-childは親要素の最初の子要素を選択しますが、:first-of-typeは指定した要素タイプの最初の要素を選択します。例えば、div内に<h1>、<p>、<p>がある場合、p:first-of-typeは2番目の要素（最初のp）を選択しますが、p:first-childは何も選択しません。

Q. 複数の要素タイプに適用できますか？

A. はい、複数の要素タイプに対して:first-of-typeを使用できます。例えば、p:first-of-type, h1:first-of-typeと記述すると、最初のp要素と最初のh1要素の両方が選択されます。

:first-of-typeが学べる書籍の紹介

「プログラミング単語帳」を使って、プログラミングの単語を英単語のように学習してみませんか？
プログラミング単語帳には、CSSの:first-of-typeや*、:active、:is()、などのような実務でよく使われる単語が数百以上収録されています。
この書籍には、プログラミングの単語の意味や読み方、単語の使い方がわかる例文などが掲載されており、いつでもどこでもプログラミングの学習ができます。

よく使われる単語にだけ絞って学習することができるので、効率的にプログラミングが学習できます。