La recomendación del selector de CSS 3 es bastante clara sobre ambos, pero intentaré mostrar las diferencias de todos modos.
Pseudoclases
Descripción oficial
El concepto de pseudo-clase se introduce para permitir la selección basada en información que se encuentra fuera del árbol del documento o que no se puede expresar usando los otros selectores simples.
Una pseudoclase siempre consta de "dos puntos" ( :) seguidos del nombre de la pseudoclase y, opcionalmente, de un valor entre paréntesis.
Se permiten pseudoclases en todas las secuencias de selectores simples contenidos en un selector. Las pseudoclases se permiten en cualquier lugar en secuencias de selectores simples, después del selector de tipo principal o selector universal (posiblemente omitido). Los nombres de pseudoclases no distinguen entre mayúsculas y minúsculas. Algunas pseudoclases son mutuamente excluyentes, mientras que otras pueden aplicarse simultáneamente al mismo elemento. Las pseudoclases pueden ser dinámicas, en el sentido de que un elemento puede adquirir o perder una pseudoclases mientras un usuario interactúa con el documento.
Fuente
¿Qué significa esto?
La naturaleza importante de las pseudoclases se establece en la primera frase: "el concepto de pseudoclases permite [...] la selección " . Permite al autor de una hoja de estilo diferenciar entre elementos según la información que "se encuentra fuera del árbol del documento" , por ejemplo, el estado actual de un enlace ( :active, :visited). Esos no se guardan en ningún lugar del DOM y no existe una interfaz DOM para acceder a estas opciones.
Por otro lado, :targetse puede acceder a través de la manipulación DOM (se puede usar window.location.hashpara encontrar el objeto con JavaScript), pero esto "no se puede expresar usando los otros selectores simples" .
Entonces, básicamente, una pseudoclase refinará el conjunto de elementos seleccionados como cualquier otro selector simple en una secuencia de selectores simples . Tenga en cuenta que todos los selectores simples en una secuencia de selectores simples se evaluarán al mismo tiempo. Para obtener una lista completa de pseudoclase, consulte la recomendación del selector CSS3.
Ejemplo
El siguiente ejemplo coloreará todas las filas pares en gris ( #ccc), todas las filas desiguales que no se pueden dividir entre 5 blancas y cada dos filas magenta.
table tr:nth-child(2n) td{
background-color: #ccc;
}
table tr:nth-child(2n+1) td{
background-color: #fff;
}
table tr:nth-child(2n+1):nth-child(5n) td{
background-color: #f0f;
}
Pseudo-elementos
Descripción oficial
Los pseudoelementos crean abstracciones sobre el árbol del documento más allá de las especificadas por el lenguaje del documento. Por ejemplo, los lenguajes de los documentos no ofrecen mecanismos para acceder a la primera letra o primera línea del contenido de un elemento. Los pseudoelementos permiten a los autores hacer referencia a esta información que de otro modo sería inaccesible. Pseudo-elementos también pueden proporcionar a los autores una manera de referirse a contenido que no existe en el documento de origen (por ejemplo, el ::beforey ::afterpseudo-elementos dan acceso a contenido generado).
Un pseudo-elemento está formado por dos dos puntos ( ::) seguidos del nombre del pseudo-elemento.
Esta ::notación es introducida por el documento actual con el fin de establecer una discriminación entre pseudoclases y pseudoelementos. Para la compatibilidad con las hojas de estilo existentes, los agentes de usuario también deben aceptar la notación anterior de dos puntos para los pseudoelementos introducidos en los niveles 1 y 2 de CSS (a saber,: primera línea,: primera letra,: antes y: después). Esta compatibilidad no está permitida para los nuevos pseudoelementos introducidos en esta especificación.
Solo puede aparecer un pseudoelemento por selector y, si está presente, debe aparecer después de la secuencia de selectores simples que representa los sujetos del selector.
Nota: Una versión futura de esta especificación puede permitir múltiples pseudoelementos por selector.
Fuente
¿Qué significa esto?
La parte más importante aquí es que "los pseudoelementos permiten a los autores hacer referencia a [..] información que de otro modo sería inaccesible " y que "también pueden proporcionar a los autores una forma de hacer referencia a contenido que no existe en el documento fuente (por ejemplo, el ::beforey los ::afterpseudoelementos dan acceso al contenido generado). ". La mayor diferencia es que en realidad crean un nuevo elemento virtual en el que se pueden aplicar reglas e incluso selectores de pseudoclase. No filtran elementos, básicamente filtran contenido ( ::first-line, ::first-letter) y lo envuelven en un contenedor virtual, que el autor puede diseñar como quiera (bueno, casi).
Por ejemplo, el ::first-linepseudoelemento no se puede reconstruir con JavaScript, ya que depende en gran medida de la fuente utilizada actualmente, el tamaño de la fuente, el ancho de los elementos, los elementos flotantes (y probablemente la hora del día). Bueno, eso no es del todo cierto: aún se pueden calcular todos esos valores y extraer la primera línea, sin embargo, hacerlo es una actividad muy engorrosa.
Supongo que la mayor diferencia es que "sólo puede aparecer un pseudoelemento por selector" . La nota dice que esto podría estar sujeto a cambios, pero a partir de 2012 no creo que veamos ningún comportamiento diferente en el futuro ( todavía está en CSS4 ).
Ejemplo
El siguiente ejemplo agregará una etiqueta de idioma a cada cita en una página determinada usando la pseudoclase :langy el pseudo-elemento ::after:
q:lang(de)::after{
content: " (German) ";
}
q:lang(en)::after{
content: " (English) ";
}
q:lang(fr)::after{
content: " (French) ";
}
q:not(:lang(fr)):not(:lang(de)):not(:lang(en))::after{
content: " (Unrecognized language) ";
}
TL; DR
Las pseudoclases actúan como selectores simples en una secuencia de selectores y, por lo tanto, clasifican los elementos según características no presentacionales, los pseudoelementos crean nuevos elementos virtuales.
Referencias
W3C