Un elemento primario puede tener uno o más elementos secundarios:

 
 
Child
 
Child
 
Child
 
Child
  

Entre estos niños, solo uno de ellos puede ser el primero. Esto es igualado por :first-child :

 
 
Child
  
Child
 
Child
 
Child
  

La diferencia entre :first-child y :first-of-type es que :first-of-type coincidirá con el primer elemento de su tipo de elemento, que en HTML se representa con su nombre de etiqueta, incluso si ese elemento no es el primero hijo del padre . Hasta el momento los elementos secundarios que estamos viendo han sido todos div , pero tengan paciencia conmigo, voy a llegar a eso en un momento.

Por ahora, lo contrario también es cierto: cualquiera :first-child también es :first-of-type por necesidad. Dado que el primer hijo aquí también es el primer div , coincidirá con ambas pseudoclases, así como con el selector de tipo div :

 
 
Child
  
Child
 
Child
 
Child
  

Ahora, si cambia el tipo del primer hijo de div a otra cosa, como h1 , seguirá siendo el primer hijo, pero ya no será el primer div obviamente; en cambio, se convierte en el primero (y único) h1 . Si hay otros elementos div que sigan a este primer hijo dentro del mismo padre, el primero de esos elementos div:first-of-type coincidirá con div:first-of-type . En el ejemplo dado, el segundo hijo se convierte en el primer div después de que el primer hijo se cambia a un h1 :

 
 
Child
  
Child
  
Child
 
Child
  

Tenga en cuenta que :first-child es equivalente a :nth-child(1) .

Esto también implica que, si bien cualquier elemento puede tener un solo elemento secundario coincidente :first-child a la vez, puede tener tantos hijos que coincidan con la :first-of-type pseudo clase como la cantidad de tipos de hijos tiene. En nuestro ejemplo, el selector .parent > :first-of-type (con una calificación implícita * :first-of-type pseudo) hará coincidir dos elementos, no solo uno:

 
 
Child
  
Child
  
Child
 
Child
  

Lo mismo vale para :last-child y :last-of-type : any :last-child es necesariamente también :last-of-type , ya que absolutamente ningún otro elemento lo sigue dentro de su padre. Sin embargo, dado que el último div es también el último hijo, h1 no puede ser el último hijo, a pesar de ser el último de su tipo.

He creado un ejemplo para demostrar la diferencia entre el first-child y el first-of-type aquí.

HTML

 
 
Child
 
Child
 
Child
 
Child
  

CSS

 .parent :first-child { color: red; } .parent :first-of-type { background: yellow; } .parent p:first-child { text-decoration: line-through; } // Does not work .parent div:first-child { font-size: 20px; } // Use this instead .parent div:first-of-type { text-decoration: underline; } // This is second child regardless of its type .parent div:nth-child(2) { border: 1px black solid; } 

Para ver el ejemplo completo, visite https://jsfiddle.net/bwLvyf3k/1/