p:last-child の挙動がわかりません

同じ階層において、最後の要素である、かつ、その要素が p であった場合スタイルが適用されます。
2022年8月6日
ユーザー

こんにちは。
MDNの :last-child のページを見ていてセレクターの組み合わせが
分からなくなってしまいました。
HTML

<div>
  <p>このテキストは選択されません。</p>
  <p>このテキストは選択されます!</p>
</div>

<div>
  <p>このテキストは選択されません。</p>
  <h2>このテキストは選択されません。 `p` ではありません。</h2>
</div>

CSS

p:last-child {
  color: lime;
  background-color: black;
  padding: 5px;
}

と記載した場合 2 つ目の p が選択されましたが、
2 つ目の div の下にある p ではない理由が分かりかねております。
(または 2 つ目の div の下にある p も装飾されるのでは?)

CSS は上記と同じもので下記 HTML を書いた場合は

<div>
  <p>こんにちは</p>
  <p>こんにちは</p>
  <p>こんにちは</p>
  <p>こんにちは</p>
</div>
<div>
  <p>こんにちは</p>
</div>

1 つ目の div の 4 つ目の p 、 2 つ目の divp に装飾が付く為、
p:last-child の意味が分かりません。
divmainsection に変えても変わらずです)
ご教示いただけますと幸いです。
よろしくお願いいたします。

この回答を見るにはプレミアムサービスへの登録が必要です

プレミアムサービスとは?