Cual es la diferencia de las pseudo-clases y los pseudo-elementos

Hola @salazar_94 :)

Las pseudo-clases especifica un estado especial a un elemento seleccionado.

/* Ejemplo */
p:first-child {
    color:red;
}
/*Convierte todo el texto del primero hijo del bloque de código en rojo. Todo el texto */

Aquí te dejo una lista de pseudo-clases: https://developer.mozilla.org/es/docs/Web/CSS/Pseudo-classes

A diferencia de las pseudo-clases los pseudo-elementos no describen un estado especial, sino que permiten añadir estilos a una parte concreta (a veces muy específica) de un elemento.

/* Ejemplo */
p::first-letter {
  color: red;
  font-size: 20px;
}
/* Toma solo la primera letra de un elemento, no todo su contenido. Solo la primera letra.*/

Aquí te dejo una lista de pseudo-elementos: https://developer.mozilla.org/es/docs/Web/CSS/Pseudoelementos

¿La diferencia? Básicamente los pseudo-elementos por lo general hacen referencia a partes específicas de un elemento, mientras que las pseudo-clases hacen referencia al estado del elemento.

Hola, los pseudo-elementos aplican para seleccionar o agregar contenido a un elemento y las pseudo-clases nos permiten seleccionar dicho elemento bajo determinadas condiciones.