最初の子要素にスタイルを適用する(同一要素のみ)

疑似クラス first-of-type

要素名: first-of-type ファースト・オブ・タイプ {~}

親要素内で、セレクタに指定した要素と同一の要素のみを対象として、最初にある子要素にスタイルを適用します。

セレクタの使用例

以下の例では、div要素内に記述されたp要素のうち、最初のp要素を対象にスタイルを適用し、上辺のマージンの幅が小さくなるようにしています。

CSS
div p:first-of-type{
  margin-top: -1em;
}
HTML
<h1>記者会見レポート</h1> HTML
<div class="lead">
  <ul>
    <li><a href="#honshi">会見要旨へ</a>
    <li><a href="#honshi">会見後インタビューへ</a>
  </ul>
  <p> 会見の会場には、多くの国の記者たちで賑わっていた。</p>
  <p>博士の発明した夢のエネルギーさえあれば、あらゆる社会問題が解決する。</p>
</div>