Różnice w first-child oraz first-of-type

Czy mógłby ktoś wyjaśnić różnice pomiędzy pseudoklasami first-child oraz first-of-type? Które i kiedy należy stosować i czy ma to jakiekolwiek znaczenie?

:first-child - pierwszy jakikolwiek element,
:first-of-type - pierwszy element danego typu.

W przypadku takiego markupu:

<div>Coś 1</div>
<div>Coś 2</div>
<p>Coś 3</p>
<p>Coś 4</p>

Dopasowania będą następujące:

Które i kiedy należy stosować i czy ma to jakiekolwiek znaczenie?

Zależnie od tego, co chcesz osiągnąć.

Na przykład jak jest taki html

<div class="information-box">
  <div class="information-type">tu ikona</div>
  <h3 class="information-title">Godziny otwarcia</h3>
  <p class="information-text">Poniedziałek: 10:00 - 18:00</p>
  <p class="information-text">Środa 10:00 - 18:00</p>
  <p class="information-text">Piątek: 10:00 - 18:00</p>
</div>

To jak zaznaczyć h3 i pierwszy p?

.information-box p:first-child {} /* zaznaczy pierwsze dziecko paragraf? */
.information-box:first-child {} /* zaznaczy div.information-type? */

Nie bijcie ale nadal nie rozumiem... -_-

.information-box h3 {
  /* ... */
}

.information-box p:first-of-type {
  /* ... */
}

Pamiętaj o tym, aby być rozważnym przy stosowaniu pseudoselektorów (tzn. :first-child, :first-of-type oraz pochodnych) - kiedyś może będziesz chciał zmienić kolejność elementów w HTMLu czy jakoś bardziej go przerobić, i takie selektory mogą Cię bardzo spowolnić (w przeróbce kodu).