Puede que se de el caso de que encuentres alguna incompatibilidad con tu código o proyecto, recuerda probar siempre en un entorno de testing antes añadir el código al trabajo final.
Solución:
Un elemento principal 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 se corresponde con :first-child:
Child
Child
Child
Child
La diferencia entre :first-child y :first-of-type es eso :first-of-type coincidirá con el primer elemento de su tipo de elemento, que en HTML está representado por su nombre de etiqueta, incluso si ese elemento no es el primer hijo del padre. Hasta ahora, todos los elementos secundarios que estamos viendo han sido divs, pero tengan paciencia conmigo, llegaré a eso en un momento.
Por ahora, lo contrario también se cumple true: ninguna :first-child es también :first-of-type por necesidad. Dado que el primer hijo aquí es también el primero divcoincidirá ambas cosas pseudo-clases, así como el selector de tipo div:
Child
Child
Child
Child
Ahora, si cambia el tipo del primer hijo de div a otra cosa, como h1seguirá siendo el primer hijo, pero ya no será el primero div obviamente; en cambio, se convierte en el primero (y único) h1. Si hay algún otro div elementos que siguen a este primer hijo dentro del mismo padre, el primero de esos div entonces los elementos coincidirán div:first-of-type. En el ejemplo dado, el segundo hijo se convierte en el primero. 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 solo puede tener un único elemento secundario que coincida :first-child a la vez, puede tener y tendrá tantos niños que coincidan con el :first-of-type pseudoclase como el número de tipos de hijos que tiene. En nuestro ejemplo, el selector .parent > :first-of-type (con un implícito * calificando el :first-of-type pseudo) coincidirá dos elementos, no solo uno:
Child
Child
Child
Child
lo mismo vale true por :last-child y :last-of-type: ninguna :last-child es por necesidad también :last-of-type, ya que absolutamente ningún otro elemento lo sigue dentro de su padre. Sin embargo, debido a que el último div es también el último hijo, el h1 no puede ser el último hijo, a pesar de ser el último de su tipo.
:nth-child() y :nth-of-type() funcionan de manera muy similar en principio cuando se usan con un argumento entero arbitrario (como en el :nth-child(1) ejemplo mencionado anteriormente), pero donde difieren es en el número potencial de elementos emparejados por :nth-of-type(). Esto se trata en detalle en ¿Cuál es la diferencia entre p:nth-child(2) y p:nth-of-type(2)?
He creado un ejemplo para demostrar la diferencia entre first-child y 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/
Finalizando este artículo puedes encontrar las referencias de otros gestores de proyectos, tú igualmente puedes insertar el tuyo si dominas el tema.