こんにちは。
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 つ目の div の p に装飾が付く為、
p:last-child の意味が分かりません。
（div を main と section に変えても変わらずです）
ご教示いただけますと幸いです。
よろしくお願いいたします。