CSS: diferencias entre :nth-child y :nth-of-type

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:

<section class="datos">
  <h1>Información</h1>
  <h2>Datos personales</h2>
  <p>Nombre</p>
  <p>Apellidos</p>
  <p>Teléfono</p>
  <p>Dirección</p>
</section>

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

.datos p:nth-child(3) { color: blue;  } /* MAL */

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».

.datos p:nth-of-type(3) { color: blue  } /* BIEN */

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