soy Kseso y esto EsCSS

Selectores Css de pseudoclases y pseudoelementos. Qué son. Todos los existentes

Qué son los selectores Css de pseudoelemento y pseudoclase y relación ordenada de todos los que existen con su enlace a la especificación que lo desarrolla.

Selectores Css de pseudoclases y pseudoelementos. Qué son. Todos los existentes

·Por Kseso ✎ 6

Selectores Css de pseudoclases y pseudoelementos. Qué son. Todos los existentesCon las continuas ampliaciones de todos los documentos del W3c que desarrollan el corpus de Css llega un momento que hay aspectos que se escapan y otros de los que directamente podemos llegar a no enterarnos ni de su existencia.

La parte fundamental de Css sin la que sería imposible su aplicación a los documentos destino son los selectores. Y dentro de éstos, los selectores Css, hay un par de subgrupos que han visto ampliado su número de forma más que notoria:

  1. Pseudoelementos
  2. Pseudoclases

Así que vamos a ver si soy capaz de sorprenderte y te descubro alguno de estos selectores que no conocieses. A continuación tienes un listado de todos los selectores de pseudoelementos y pseudoclases con su enlace al documento que los define. Están listados por orden alfabético.

Selectores de pseudoelementos

¿Qué son los pseudoelementos?

En este momento podemos encontrar "respuestas" en varios documentos. El más actual es, con estatus de recomendación (W3C Recommendation), Selectors Level 3

Los pseudo-elementos crean abstracciones sobre la estructura del documento más allá de los especificados por el lenguaje del documento.
Por ejemplo, los lenguajes del documento no ofrecen mecanismos para acceder a la primera letra o primera línea del contenido de un elemento. Los pseudo-elementos permiten a los autores hacer referencia a esta información de otro modo inaccesible. Los pseudo-elementos también pueden proporcionar a los autores una manera de referirse a contenidos que no existe en el documento de origen (por ejemplo, los pseudo-elementos ::before y ::after dan acceso a contenidos generados en CSS).

¿Traducimos? El selector de pseudoelemento es una herramienta para poder apuntar desde la hoja de estilos a una parte del documento que no tiene entidad propia (categoría de elemento u objeto en el DOM) y que por lo tanto, de no existir el pseudoelemento oportuno, no sería posible hacerlo.

Todos los selectores de pseudoelementos

Grafía del selector de pseudoelemento

Tradicionalmente (epecidicación Css2.1) la forma de escribir el selector de pseudoelemento era anteponer el carácter ortográfico : (dos puntos) al su nombre. Con el desarrollo de Css3 esta grafía se cambió a duplicar los dos puntos :: para diferenciarlos de los selectores de pseudoclase. Ambas formas son funcionales y reconocidas por los navegadores en sus versiones más actuales.

Selectores de pseudoclase

¿Qué son las pseudoclases?

De nuevo encontramos la respuesta en el mismo documento, Selectors Level 3

El concepto pseudo-clase se introdujo para permitir la selección en base a información que se encuentra fuera de la estructura del documento (DOM) o que puede ser difícil o imposible de expresar con los otros selectores simples.

¿Traducimos? El selector de pseudoclase es una herramienta para poder apuntar desde la hoja de estilos a un elemento del DOM en base a alguna información o detalle ajeno al propio elemento y DOM.

Esta información a la que se refiere la especificación es de lo más variada y en base a ella los acota la especificación. Puede ser por el estado en que se encuentre el elemento, por el número que hace al aparece en el dom, a resultas de alguna acción del usuario...

Todos los selectores de pseudoeclase

avatar del Editor del blog

the obCSServer ᛯ Ramajero Argonauta, Enredique Amanuense de CSS.
#impoCSSible inside
Dicen que, en español, EsCss es el mejor blog de CSS. Posíblemente exageren.
@Kseso EsCss Kseso