Cosas como a:linko div::after...

La información sobre la diferencia parece escasa.

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

• Selectores Nivel 3
  • 4. Sintaxis del selector
  • 6.6 Pseudoclases
  • 7. Pseudoelementos
• Especificación CSS 2.1 (desactualizada pero aún informativa)
  • 5.2 Sintaxis del selector :

    Un selector simple es un selector de tipo o un selector universal seguido inmediatamente por cero o más selectores de atributos, selectores de ID o pseudoclases, en cualquier orden. El selector simple coincide si todos sus componentes coinciden.

  • 5.10 Pseudoelementos y pseudoclases

Una pseudoclase filtra elementos existentes.
a:linksignifica todos los <a>s que son :link.

Un pseudo-elemento es un nuevo elemento falso.
div::aftersignifica elementos no existentes después de <div>s.

::selectiones otro ejemplo de un pseudo-elemento.
No se refiere a todos los elementos seleccionados; significa el rango de contenido que se selecciona, que puede abarcar porciones de varios elementos.

Breve descripción que me ayudó a comprender la diferencia:

• Las pseudoclases describen un estado especial.
• Los pseudo-elementos coinciden con elementos virtuales.

De los documentos de Sitepoint:

Una pseudoclase es similar a una clase en HTML, pero no se especifica explícitamente en el marcado. Algunas pseudoclases son dinámicas: se aplican como resultado de la interacción del usuario con el documento. - http://reference.sitepoint.com/css/pseudoclasses . Estas serían cosas como :hover, :active, :visited.

Los pseudo-elementos coinciden con elementos virtuales que no existen explícitamente en el árbol del documento. Los pseudoelementos pueden ser dinámicos, ya que los elementos virtuales que representan pueden cambiar, por ejemplo, cuando se modifica el ancho de la ventana del navegador. También pueden representar contenido generado por reglas CSS. - http://reference.sitepoint.com/css/pseudoelements . Estas serían cosas como before, :after, :first-letter.

A continuación se muestra la respuesta simple:

Usamos pseudo-clase cuando necesitamos aplicar CSS en función del estado de un elemento. Como:

1. Aplicar CSS al pasar el mouse por el elemento de anclaje ( :hover)
2. Aplicar CSS cuando se enfoca en un elemento html ( :focus). etc.

Usamos pseudo-elemento cuando necesitamos aplicar CSS a las partes específicas de un elemento o un contenido recién insertado . Como:

1. Aplicar el CSS a la primera letra o primera línea de un elemento ( ::first-letter)
2. Insertar contenido antes o después del contenido de un elemento ( ::before, ::after)

A continuación se muestra el ejemplo de ambos:

<html>

 <head>
   <style>
   p::first-letter {  /* pseudo-element */
     color: #ff0000;
   }

   a:hover {          /* pseudo-class */
     color: red;      
   }
   </style>
 </head>

 <body>
   <a href="#" >This is a link</a>
   <p>This is a paragraph.</p>
 </body>

</html>

Una respuesta conceptual:

• Un pseudoelemento se refiere a cosas que son parte del documento, pero que aún no lo sabe. Por ejemplo, la primera letra. Antes solo tenías mensajes de texto. Ahora tiene una primera letra a la que puede apuntar. Es un concepto nuevo, pero siempre fue parte del documento. Esto también incluye cosas como ::before; si bien no hay contenido real allí, el concepto de algo antes que otra cosa siempre estuvo allí, ahora lo está especificando.

• Una pseudoclase es el estado de algo en el DOM. Al igual que una clase es una etiqueta que se asocia con un elemento, una pseudoclase es una clase que se asocia mediante el navegador o DOM o lo que sea, generalmente como respuesta a un cambio de estado. Cuando un usuario visita un enlace, ese enlace puede adoptar el estado de "visitado". Puede imaginarse el navegador aplicando la clase 'visitado' al elemento Anchor. :visitedentonces sería cómo seleccionar para esa pseudo-clase.

Pseudoclase

Una pseudoclase es una forma de seleccionar ciertas partes de un documento HTML, basada en principio no en el árbol del documento HTML en sí y sus elementos o en características como nombre, atributos o contenido, sino en otras condiciones fantasmas como la codificación del idioma o el estado dinámico. de un elemento.

La pseudoclase original definió estados dinámicos de un elemento que se ingresan y salen con el tiempo, o mediante la intervención del usuario. CSS2 amplió este concepto para incluir componentes de documentos conceptuales virtuales o partes inferidas del árbol de documentos, por ejemplo, primer hijo. Las pseudoclases operan como si se añadieran clases fantasmas a varios elementos.

RESTRICCIONES: A diferencia de los pseudo-elementos, las pseudo-clases pueden aparecer en cualquier lugar de la cadena de selección.

Ejemplo de código de pseudoclase:

a:link /* This selects any "a" element whose target has not been visited.*/
{
padding : 4px;
text-decoration : none;
width : 10%;
color : #000000; /* black text color */
background-color : #99FF99; /* set to a pastel green */
border-top : 2px solid #ccffcc; /* highlight color */
border-left : 2px solid #ccffcc; /* highlight color */
border-bottom : 2px solid #003300; /* shadow color */
border-right : 2px solid #003300; /* shadow color */
}

a:visited /* This selects any "a" element whose target has been visited.*/
{ padding : 4px;
text-decoration : none;
color : #000000; /* black text color */
background-color : #ccccff; /* set to a lavender */
border-top : 2px solid #ffffff; /* highlight color */
border-left : 2px solid #ffffff; /* highlight color */
border-bottom : 2px solid #333366; /* shadow color *
border-right : 2px solid #333366; /* shadow color */
}

a:hover /* This selects any "a" element which is in a hover state. This is a state during pointer movement within the rendering region of an element. The user designates an element but does not activate it. */
{
color : #000000; /* black text color */
background-color : #99cc99; /* desaturated color */
border-top : 2px solid #003300; /* shadow color */
border-left : 2px solid #003300; /* shadow color */
border-bottom : 2px solid #ccffcc; /* highlight color */
border-right : 2px solid #ccffcc; /* highlight color */
}

a:focus /* This selects any "a" element which currently has focus. Focus is a state during which an element accepts keyboard input or other forms of text input. */
{
padding : 4px;
text-decoration : none;
width : 10%;
color : #000000; /* black text color */
background-color : #ffff99; /* set to a pastel yellow */
border-top : 2px solid #ffffcc; /* highlight color */
border-left : 2px solid #ffffcc; /* highlight color */
border-bottom : 2px solid #666633; /* shadow color */
border-right : 2px solid #666633; /* shadow color */
}

a:active /* This selects any "a" element which is in a state of activation. Active is a state during pointer activation (eg: press and release of a mouse) within the rendering region of an element.*/
{
padding : 4px;
text-decoration : none;
width : 10%;
color : #000000; /* black text color */
background-color : #ff99ff; /* set to a pink */
border-top : 2px solid #ffccff; /* highlight color */
border-left : 2px solid #ffccff; /* highlight color */
border-bottom : 2px solid #663366; /* shadow color */
border-right : 2px solid #663366; /* shadow color */
}

Una página que muestra una representación del código de pseudoclase anterior

Pseudo-elementos

Los PSEUDO-ELEMENTS se utilizan para abordar subpartes de elementos. Le permiten establecer el estilo de una parte del contenido de un elemento más allá de lo especificado en los documentos. En otras palabras, permiten definir elementos lógicos que no están realmente en el árbol de elementos del documento. Los elementos lógicos permiten abordar la estructura semántica implícita en los selectores de CSS.

RESTRICCIONES: Los pseudo-elementos solo se pueden aplicar a contextos externos y de nivel de documento, no a estilos en línea. Los pseudoelementos están restringidos en cuanto a dónde pueden aparecer en una regla. Solo pueden aparecer al final de una cadena de selectores (después del asunto del selector). Deben ir después de cualquier nombre de clase o ID que se encuentre en el selector. Solo se puede especificar un pseudoelemento por selector. Para abordar múltiples pseudoelementos en una estructura de un solo elemento, se deben realizar múltiples declaraciones de selector / declaración de estilo.

Los pseudoelementos se pueden utilizar para efectos tipográficos comunes, como mayúsculas iniciales y mayúsculas. También pueden abordar el contenido generado que no está en el documento de origen (con el "antes" y el "después"). A continuación, se muestra una hoja de estilo de ejemplo de algunos pseudo-elementos con propiedades y valores agregados.

/ * La siguiente regla selecciona la primera letra de un encabezado 1 y establece la fuente en 2em, cursiva, con fondo verde. Primera letra selecciona la primera letra / carácter representado para un elemento a nivel de bloque. * /

h1:first-letter {
font-size : 2em;
font-family : "Lucida Handwriting", "Lucida Sans", "Lucida Console", cursive;
background-color : #ccffcc;
}

/* The following rule selects the first displayed line in a paragraph and makes it bold. First-line selects the first rendered line on the output device of a block-level element. */

p:first-line {
font-weight : bold;
}

/* The following rule selects any content placed before a blockquote and inserts the phrase "Quote of the day:" in bold small caps with a green background. */

blockquote:before {
content : "Quote of the day:";
background-color : #ccffcc;
font-weight : bold;
font-variant : small-caps;
}

/* The following rule selects any content placed before a "q" element and inserts the smart open quote. */

q:before {
content : open-quote;
}

/* The following rule selects any content placed after a "q" element and inserts the smart close quote. */

q:after{
content : close-quote;
}

Fuentes: Enlace

En resumen, de Pseudo-classes en MDN:

Un CSS pseudo-clase es una palabra clave añadido a un selector que especifica un estado especial del elemento (s) seleccionado. Por ejemplo, :hover se puede usar para aplicar un estilo cuando el usuario pasa el mouse sobre un botón.

div: hover {
  color de fondo: # F89B4D;
}

Y, de Pseudo-elementos en MDN:

Un pseudoelemento CSS es una palabra clave agregada a un selector que le permite diseñar una parte específica de los elementos seleccionados. Por ejemplo, ::first-linese puede utilizar para diseñar la primera línea de un párrafo.

/ * La primera línea de cada elemento <p>. * /
p :: primera línea {
 color azul;
 text-transform: mayúsculas;
}