propiedad - ¿Cuál es la diferencia entre una pseudo-clase y un pseudo-elemento en CSS?

pseudo elementos css ejemplos

Question

Cosas como a:link or div::after ...

La información sobre la diferencia parece escasa.

Answer 1

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

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

Answer 2

De los documentos de Sitepoint:

Una pseudo-clase es similar a una clase en HTML, pero no se especifica explícitamente en el marcado. Algunas pseudo-clases 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 pseudoelementos coinciden con los elementos virtuales que no existen explícitamente en el árbol del documento. Los pseudoelementos pueden ser dinámicos, en la medida en 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 de CSS. - http://reference.sitepoint.com/css/pseudoelements . Estas serían cosas como before, :after, :first-letter .

Answer 3

En resumen, de Pseudo-classes en MDN:

Una pseudo-clase CSS es una palabra clave agregada a un selector que especifica un estado especial de los elementos seleccionados. Por ejemplo,: el control :hover se puede usar para aplicar un estilo cuando el usuario se desplaza sobre un botón.

div:hover { background-color: #F89B4D; }

Y, desde Pseudo-elements en MDN:

Un pseudo-elemento CSS es una palabra clave añadida a un selector que le permite diseñar una parte específica de los elementos seleccionados. Por ejemplo, ::first-line se puede usar para dar estilo a la primera línea de un párrafo.

/* The first line of every <p> element. */ p::first-line { color: blue; text-transform: uppercase; }

Answer 4

La recomendación del selector CSS 3 es bastante clara sobre ambos, pero intentaré mostrar las diferencias de todos modos.

Pseudo-clases

Descripción oficial

El concepto de pseudoclase se introduce para permitir la selección en función de información que se encuentra fuera del árbol de documentos o que no se puede expresar con otros selectores simples.

Una pseudo-clase siempre consta de un "dos puntos" ( : seguido del nombre de la pseudo-clase y opcionalmente por un valor entre paréntesis.

Las pseudo-clases están permitidas 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 las pseudoclases no distinguen entre mayúsculas y minúsculas. Algunas pseudo-clases son mutuamente excluyentes, mientras que otras pueden aplicarse simultáneamente al mismo elemento. Las pseudo-clases pueden ser dinámicas, en el sentido de que un elemento puede adquirir o perder una pseudo-clase mientras el usuario interactúa con el documento.

Source

¿Qué significa esto?

La naturaleza importante de las pseudo-clases se establece en la primera oración: "la selección del permiso [...] del concepto de pseudoclases " . Permite al autor de una hoja de estilos diferir entre los 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 :target se puede acceder al :target a través de la manipulación DOM (puede usar window.location.hash para encontrar el objeto con JavaScript), pero esto "no se puede expresar con otros selectores simples" .

Entonces, básicamente, una pseudo-clase 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 pseudo-clase, consulte la recomendación del selector de CSS3.

Ejemplo

El siguiente ejemplo coloreará todas las filas pares de gris ( #ccc ), todas las filas irregulares que no son divisibles entre 5 blancas y cada una de las otras filas de 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 pseudo-elementos crean abstracciones sobre el árbol del documento más allá de las especificadas por el lenguaje del documento. Por ejemplo, los idiomas 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 referirse a esta información inaccesible. Los pseudoelementos también pueden proporcionar a los autores una forma de referirse a contenido que no existe en el documento de origen (por ejemplo, los pseudoelementos ::after ::before y ::after dan acceso al contenido generado).

Un pseudo-elemento está formado por dos dos puntos ( :: :) seguidos por el nombre del pseudo-elemento.

Esta notación :: es introducida por el documento actual para establecer una discriminación entre pseudo-clases y pseudo-elementos. Para la compatibilidad con las hojas de estilo existentes, los agentes de usuario también deben aceptar la notación anterior de un punto para pseudoelementos introducidos en los niveles CSS 1 y 2 (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 un pseudo-elemento puede aparecer 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 pseudo-elementos por selector.

Source

¿Qué significa esto?

La parte más importante aquí es que los "pseudoelementos permiten a los autores referirse a [...] información que de otro modo sería inaccesible " y que "también pueden proporcionar a los autores una forma de referirse a contenido que no existe en el documento de origen (p. ::before y ::after pseudoelementos dan acceso al contenido generado). ". La mayor diferencia es que realmente crean un nuevo elemento virtual al que se pueden aplicar las reglas e incluso los selectores de pseudo-clase. No filtran los elementos, básicamente filtran el 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 pseudo-elemento ::first-line no se puede reconstruir con JavaScript, ya que depende en gran medida de la fuente usada actual, el tamaño de las fuentes, el ancho de los elementos, y probablemente la hora del día. Bueno, eso no es del todo cierto: todavía se podrían 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 "solo puede aparecer un pseudo-elemento por selector" . La nota dice que esto podría estar sujeto a cambios, pero a partir de 2012 no creo que veamos un 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 dada utilizando la pseudo-clase :lang y 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 pseudo-clases actúan como simples selectores en una secuencia de selectores y, por lo tanto, clasifican los elementos en las características no presentacionales, los pseudo-elementos crean nuevos elementos virtuales.

Referencias

W3C

• Selectores Nivel 3
  • 4. Sintaxis del selector
  • Source
  • Source
• Especificación CSS 2.1 (obsoleto pero aún informativo)
  • 5.2 Sintaxis del selector :

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

  • 5.10 Pseudo-elementos y pseudo-clases

Answer 5

Una pseudo-clase filtra los elementos existentes.
a:link significa todos <a> s que son :link .

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

::selection es otro ejemplo de un pseudo-elemento.
No significa todos los elementos que se seleccionan; significa el rango de contenido que se selecciona, que puede abarcar porciones de elementos múltiples.

Answer 6

Una respuesta conceptual:

• Un pseudo-elemento se refiere a cosas que son parte del documento, pero aún no lo sabe. Por ejemplo, la primera letra. Antes solo tenías texto. Ahora tienes una primera carta a la que puedes 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 presente; ahora lo estás especificando.

• Una pseudo-clase es el estado de algo en el DOM. Al igual que una clase es una etiqueta que asocia con un elemento, una pseudoclase es una clase que se asocia con 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 tomar el estado de ''visitado''. Puede imaginar el navegador aplicando la clase ''visitado'' al elemento Anclaje. :visited sería entonces cómo se selecciona para esa pseudo-clase.

Answer 7

A continuación se encuentra la respuesta simple:

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

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

Utilizamos pseudo-element 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>

Answer 8

Pseudo-Class

Una pseudo-clase es la forma de seleccionar ciertas partes de un documento HTML, basado en principio no en el árbol del documento HTML y sus elementos o en características como nombre, atributos o contenidos, sino en otras condiciones fantasmas como la codificación del lenguaje o el estado dinámico de un elemento.

La pseudoclase original define estados dinámicos de un elemento que se ingresan y salen a lo largo del 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 pseudo-clases operan como si las clases ficticias se agregaran a varios elementos.

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

Ejemplo de código de pseudo-clase:

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 pseudo clase anterior

Pseudo-elementos

PSEUDO-ELEMENTS se utilizan para abordar subpartes de elementos. Le permiten establecer el estilo en 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 pseudoelementos solo se pueden aplicar a contextos externos y a nivel de documento, no a estilos en línea. Los pseudo-elementos están restringidos en donde pueden aparecer en una regla. Pueden aparecer solo al final de una cadena de selector (después del tema del selector). Deben venir después de cualquier nombre de clase o ID encontrado en el selector. Solo se puede especificar un pseudo-elemento por selector. Para abordar múltiples pseudoelementos en una sola estructura de elementos, se deben realizar múltiples sentencias de selector / declaración de estilo.

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

/ * La siguiente regla selecciona la primera letra de un encabezado 1 y establece la fuente en 2em, cursiva, con un fondo verde. La primera letra selecciona la primera letra / carácter procesada para un elemento de 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: Link