Vamos a ver con un ejemplo sencillo para conocer bien las diferencias entre estas 2 pseudo-clases de css, y saber utilizarlas correctamente. Antes una corta definición:

  • :nth-child selecciona el elemento que es el secundario de su elemento primario.
  • :nth-of-type selecciona el elemento que es el enésimo elemento del mismo nivel de su tipo.

Ahora un ejemplo. Tenemos el siguiente html:

Y queremos seleccionar el elemento (p) que contiene el texto de “Teléfono” (es el 3º párrafo) y aplicarle un color azul:

Esta forma sería incorrecta. Con p:nth-child(3), lo que hacemos es seleccionar el 3º elemento de su padre (.datos) que en este caso es el campo con texto “Nombre”.

Y en cambio con p:nth-of-type(3) seleccionamos el 3º elemento del mismo tipo (párrafo) de su elemento padre (.datos)