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

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

Con 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

• ::after Selectors L3
• ::attr() Selectors Non Element
• ::backdrop Fullscreen
• ::before Selectors L3
• ::choices CSS UI L3
• ::first-letter Selectors L3
• ::first-line Selectors L3
• ::footnote-call CSS GCPM
• ::footnote-marker CSS GCPM
• ::marker CSS Lists L3
• ::nth-fragment() CSS Overflow L3
• ::read-only CSS UI L3
• ::repeat-index CSS UI L3
• ::repeat-item CSS UI L3
• ::value CSS UI L3

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

• :active Selectors L3
• :active-drop Selectors L4
• :ancestor() Shadow Styling
• :any-link Selectors L4
• :blank CSS Page L3
• :blank Selectors L4
• :checked Selectors L3
• :current Selectors L4
• :current() Selectors L4
• :dir() Selectors L4
• :default CSS UI L3
• :disabled Selectors L3
• :empty Selectors L3
• :enabled Selectors L3
• :first CSS Page L3
• :first-child Selectors L3
• :first-of-type Selectors L3
• :focus Selectors L3
• :fullscreen Fullscreen
• :future Selectors L4
• :host Shadow Styling
• :host() Shadow Styling
• :hover Selectors L3
• :indeterminate Selectors L3
• :in-range CSS UI L3
• :invalid CSS UI L3
• :invalid-drop Selectors L4
• :lang Selectors L3
• :last-child Selectors L3
• :last-of-type Selectors L3
• :left CSS Page L3
• :link Selectors L3
• :local-link Selectors L4
• :local-link() Selectors L4
• :matches() Selectors L4
• :not Selectors L3
• :nth-child() Selectors L3
• :nth-column Selectors L4
• :nth-last-child() Selectors L3
• :nth-last-column Selectors L4
• :nth-last-match Selectors L4
• :nth-last-of-type() Selectors L3
• :nth-match Selectors L4
• :nth-of-type() Selectors L3
• :only-child Selectors L3
• :only-of-type Selectors L3
• :optional CSS UI L3
• :out-of-range CSS UI L3
• :past Selectors L4
• :placeholder-shown Selectors L4
• :read-only CSS UI L3
• :read-write CSS UI L3
• :required CSS UI L3
• :right CSS Page L3
• :root Selectors L3
• :scope Selectors L4
• :target Selectors L3
• :top Shadow Styling
• :valid CSS UI L3
• :valid-drop Selectors L4
• :visited Selectors L3

Kseso

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