La pseudo-clase nth-of-type selecciona el elemento HTML que es el enésimo elemento hermano del mismo nivel de su TIPO.
En cambio nth-child selecciona el elemento HTML que es el enésimo elemento hermano (teniendo en cuenta la posición de elementos de distinto tipo)
Veamos un ejemplo para entender la mecánica de funcionamiento de la pseudo-clase nth-of-type, si tenemos la siguiente página:
<!DOCTYPE html>
<html>
<head>
<title>Problema</title>
<meta charset="UTF-8">
<link rel="StyleSheet" href="estilos.css" type="text/css">
</head>
<body>
<div id="contenido">
<h1>Título</h1>
<p>Párrafo 1</p>
<p>Párrafo 2</p>
<p>Párrafo 3</p>
</div>
</body>
</html>
Si queremos pintar de rojo el primer párrafo utilizando la pseudo-clase nth-child debemos especificar el siguiente selector:
#contenido p:nth-child(2) {
color:red;
}
Es importante entender que en ese nivel hay cuatro elemento (un h1 y tres párrafos) y mediante nth-child debemos indicar el segundo elemento si queremos acceder al primer párrafo.
Entonces para este tipo de problemas donde los elementos HTML de un nivel sean de distintos tipos y queremos acceder solo a los de un determinado tipo debemos emplear este nuevo conjunto de pseudo-clases que solo tienen en cuenta los elementos del mismo tipo.
Para pintar de color rojo el primer párrafo contenido en el div debemos utilizar la sintaxis más adecuada:
#contenido p:nth-of-type(1) {
color:red;
}
