cssの:first-childと:last-childの違いについて

Question

前提・実現したいこと

css の:first-child と :last-child を理解したい。

発生している問題

cssの勉強で、:first-child と :last-childを試していたのですが、よくわかりません。
:first-child と :last-child はどちらも兄弟要素のグループの中から「最初」と「最後」の要素を示すものと思っていましたが、試した所:last-child が思った様に適用されません。

HTMLソースの「どちらもヒットなし -1-」か「どちらもヒットなし -2-」のどちらかに :last-child がヒットすると思っていたのですが・・
CSSの親・兄弟・子孫の理解が間違っているのでしょうか？

該当のソースコード

p:first-child {
  color: blue;
}
p:last-child {
  color: red;
}

<p>first-childにヒット</p>
<p>どちらもヒットなし -1-</p>
<div>
  <p>first-childにヒット</p>
  <h5>h5 要素</h5>
  <p>last-childにヒット</p>
</div>
<div>
  <p>first-childにヒット</p>
  <h5>h5 要素</h5>
  <p>どちらもヒットなし</p>
  <h5>h5 要素</h5>
</div>
<p>どちらもヒットなし -2-</p> 

試したこと

jsfiddle　で試しました

Answer 1

おっと、回答を書いているうちに解決されてしまいました。
せっかく調べたのでjsfiddleで正しく出ない原因だけ。

入力内容の後にscript要素が入るんですね。

Comments

[miyakichi]

なるほど！script要素が入っていたんですね！
jsfiddleは初めて使ったので分かりませんでした・・
有難うございました。

Answer 2

jsfiddle ではなく、HTMLファイルを作成して試した所、「どちらもヒットなし -2-」に :last-child がヒットしました。
お騒がせしました。

Answer 3

<p>どちらもヒットなし -2-</p>は、明らかにlast-childだと思いますが、赤く表示されていないのでしょうか？
後ろに何かゴミが入ってるのでは？