Hola Julio, en pocas palabras la pseudo-clase
:first-child representa cualquier elemento que sea el primer elemento hijo del elemento padre.
Fijate en el sigiente ejemplo:
En el caso anterior solo el primer span y el span dentro de la etiqueta em quedarian con fondo verde.
Por otra parte en el caso, la pseudo-clase
first-of-type representa el primero de los hermanos de su tipo en la lista de hijos de su elemento padre. Es decir si al ejemplo anterior aplicamos lo siguiente seria el mismo resultado:
Pero si cambiamos el <span> por un <p> solo este ultimo quedaria con fondo verde.
En resumen, las pseudo-clases :first-of-type y :last-of-type permiten ser un poco flexibles ya que permiten indicar el tipo del elemento sin importar la posicion en el documento. En cambio :first-child y :last-child se centra en los elementos que ocupan la primera y ultima posicion en el documento html respecto a su elemento padre.
Referencias:
https://developer.mozilla.org/es/docs/Web/CSS/:first-of-type
https://developer.mozilla.org/es/docs/Web/CSS/:first-child
