¿Cuál es la diferencia entre: first-child y: first-of-type?

No puedo distinguir la diferencia entre los element:first-child y element:first-of-type

Por ejemplo, di, tenías un div

div:first-child
→ Todos los elementos

que son el primer hijo de su padre.

div:first-of-type
→ Todos los elementos

que son el primer elemento

de su elemento primario.

Esto parece exactamente lo mismo, pero funcionan de manera diferente.

¿Podría alguien explicar por favor?

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/