Difference between first-child and first-of-type pseudo selector.

Here :>

<div>
  <h1>First Heading</h1>
  <p>First Paragraph</p>
  <p>First Paragraph</p>
  <p>First Paragraph</p>
  <h1>Last Heading</h1>
<div>

p:first-child{
  color:red;
}

p:last-child{
  color:blue;
}
p:first-of-type{
  color:orange;
}
p:last-of-type{
  color:green
}