:first-child:first-of-typeの違い

これは:first-child:first-of-typeの違いを見るためのサンプルです。
※各テキストの要素名が分かるように::before疑似要素と::after疑似要素を使って、タグを表示してます。

違いを見るためのサンプルスタイル

:first-child:first-of-typeを使って、以下の5つのスタイルを用意しました。

このセクション内で、上記のスタイルが適用される事になります。

このテキストはひとつめの<p>なので、:first-of-typeで指定した、グレーの背景色がつきます。

:first-childは、同セクション内の要素すべてを対象とするため、上記テキストは<h3>も含め2つめの要素と解釈されます。「ひとつめの要素<p>」は存在しないということになります。

  • これは<ul>リストのひとつめのテキスト。
  • これは<ul>リストのふたつめのテキスト。
  • これは<ul>リストのみっつめのテキスト。

このテキストは3つめの<p>ですが、
:nth-child(5)は、:first-childと同じ理由でこのテキストを5つめの要素と解釈するため、青い枠線がつきます。

このテキストは4つめの<p>です。

このテキストは5つめの<p>なので、濃いめのグレーの背景色がつきます。

ここは別セクションとなるので、このテキストはひとつめの<p>という事になります。
ひとつめの要素<p>でもあるので、赤い枠線とグレーの背景色が両方ともつきます。

<section id="test">の中の別セクションタイトル

  1. これは<ol>リストのひとつめのテキスト。
  2. これは<ol>リストのふたつめのテキスト。
  3. これは<ol>リストのみっつめのテキスト。
  4. これは<ol>リストのよっつめのテキスト。
  5. これは<ol>リストのいつつめのテキスト。
  6. これは<ol>リストのむっつめのテキスト。
  7. これは<ol>リストのななつめのテキスト。
  8. これは<ol>リストのやっつめのテキスト。

このテキストは2つめの<p>です。

このテキストは3つめの<p>ですが、「5つめの要素<p>」ということで、青い枠線がつきます。

このテキストは6つめの<p>です。