コーディングの際に「:first(last)-child」「:first(last)-of-type」が効かないということがあったため、改めてまとめます。

スタイルの仕様（:first(last)-child）：

「:first(last)-child」は、親要素の最初（最後）の子要素に対してスタイルが適応されます。

もし親要素の最初（最後）にある要素に対して別のタグがあると機能しません。
例のようにHTMLに下記のスタイルを適応した場合に結果が異なってきます。

今回の場合、親要素の中にある「子要素＝最初（最後）のpタグ」にスタイルを当てようとしています。

「パターン１」はどちらも適切にスタイルが適応されています。
しかし、どちらの「パターン２」も最初（最後）の要素が「h2」のためスタイルが適応されません。

例

div {
  p:first-child {
    font-weight: bold; // 最初の段落のみスタイルを変更
  }
}

div {
  p:last-child {
    font-weight: bold; // 最後の段落のみスタイルを変更
  }
}

結果（first-child）

<-- パターン1 -->
<div>
  <p>Paragraph 1</p>　　　<-- 適応⭕️ -->
  <h2>Header 1</h2>
  <p>Paragraph 2</p>
  <h2>Header 2</h2>
  <p>Paragraph 3</p>
</div>

<-- パターン２ -->
<div>
  <h2>Header 1</h2>　　<-- 適応❌ -->
  <p>Paragraph 1</p>
  <h2>Header 2</h2>
  <p>Paragraph 2</p>
</div>

結果（last-child）

<-- パターン1 -->
<div>
  <h2>Header 1</h2>
  <p>Paragraph 1</p>
  <h2>Header 2</h2>
  <p>Paragraph 2</p>　　　<-- 適応⭕️ -->
</div>

<-- パターン２ -->
<div>
  <p>Paragraph 1</p>
  <h2>Header 1</h2>
  <p>Paragraph 2</p>
  <h2>Header 2</h2>
  <p>Paragraph 3</p>
  <h2>Header 2</h2>　　<-- 適応❌ -->
</div>

このように「:first(last)-child」では、同じ階層に別のタグが入る場合、例のような不具合が発生する場合があるので、注意しましょう。

スタイルの仕様（:first(last)-of-type）：

「:first(last)-of-type」でも親要素の最初（最後）の子要素に対してスタイルが適応されます。

しかし、「:first(last)-child」と異なり、親要素の中でpタグが複数あるとして、かつ別の子要素（例えばh2）が入っている場合などにも機能します。

例を用いて説明します。

今回は打って変わってどちらも適切にスタイルが適応されています。

例

div {
  p:first-of-type {
    color: green; // 最初の <p> 要素に適用
  }
}
  
  
div {
  p:last-of-type {
    color: orange; // 最後の <p> 要素に適用
  }
}

結果

<div>
	<h2>Header 1</h2>
  <p>Paragraph 1</p>　　　<-- 適応⭕️（**first-of-type**） -->
  <h2>Header 2</h2>
  <p>Paragraph 2</p>
  <h2>Header 3</h2>　　　<-- 適応⭕️（last**-of-type**） -->
  <p>Paragraph 3</p>
</div>

しかし、親要素の中に指定したタグがない場合には機能しません。

例

div {
  p:last-of-type {
    color: orange;
  }
}

結果

<div>
  <h2>Header 1</h2>
  <h2>Header 2</h2>
  <h2>Header 3</h2>　　　<-- 適応❌（last**-of-type**） -->
</div>

結構大規模なHTMLを書いていると階層が深くなって来るため、「**:first(last)-childと:first(last)-of-typeの違い」を理解していないとスタイルが適応されないなどで、詰まることになるため理解しておきましょう。

参考文献：
https://web-create-kokusyo.com/css/%E3%80%90css%E3%80%91%E3%80%8Clast-of-type%E3%81%8C%E5%8A%B9%E3%81%8B%E3%81%AD%E3%81%88%E3%81%88%E3%80%8D%E6%99%82%E3%81%AE%E5%8E%9F%E5%9B%A0%E3%81%A8%E5%AF%BE%E7%AD%96/