Sobre pseudo-clases y pseudo-elementos

2/jul/2015 4

Las pseudo-clases y los pseudo-elementos son tipos de selectores CSS que permiten alcanzar estados y elementos que no están en el DOM original. La lista de pseudo-clases es amplia, la de pseudo-elementos no ha crecido hasta la actual versión de CSS3 (aunque en CSS4 se vienen varios más):

Pseudo-clases:

  • :link
  • :visited
  • :active
  • :hover
  • :focus
  • :target
  • :empty
  • :enabled
  • :disabled
  • :checked
  • :nth-child(n)
  • :nth-last-child(n)
  • :nth-of-type(n)
  • :nth-last-of-type(n)
  • :first-child
  • :first-of-type
  • :last-of-type
  • :only-child
  • :only-of-type
  • :root
  • :lang(x)
  • :not(s)

Pseudo-elementos:

  • ::before
  • ::after
  • ::first-line
  • ::first-letter

Mientras las pseudo-clases se encargan de entregar una manera de seleccionar elementos HTML basados en la información que no es accesible en el DOM (por ejemplo, el estado :active ó su posición basado en los elementos hermanos como :nth-of-type()), los pseudo-elementos crean una abstracción en el DOM creando un nuevo elemento virtual el que puede ser manipulado en su contenido y forma (por ejemplo ::before).

Nomenclatura:

El estándar CSS2.1 define a ambos con doble-punto (:) pero en CSS3 las pseudo-clases se prefijan con doble-punto (:) y los pseudo-elementos con doble-doble-punto (::). Lamentablemente nos queda IE8 en el regazo, soportando estas útiles e importantes pseudo-propiedades sólo con doble-punto (:); como consecuencia todos los browsers siguen soportando ambas nomenclaturas. Si sigues soportando IE8, debes usar doble-punto (:); caso contrario puedes utilizar doble-doble-punto (::) para pseudo-elementos si quieres obedecer las reglas CSS3 de W3C.

Links:

Comentarios

  1. Alcanzar y manipular pseudo-elementos CSS con JavaScript | CSSLab | Laboratorio de ideas web [#]

    […] pseudo-elementos (y pseudo-clases) son selectores CSS virtuales que no existen esplícitamente en el árbol de DOM. […]

  2. La pseudo-class :not | CSSLab | Laboratorio de ideas web [#]

    […] es una de las pseudo-clases menos utilizadas pero con gran utilidad al momento de alcanzar selectores CSS que no comparten […]

  3. juan pablo Camargo [#]

    Buenas tardes:

    quisiera saber si es posible usar pseudo clases y pseudo elementos a la vez en una misma etiqueta en css.

    Saludos desde Colombia.

Deja tu Comentario

Tu dirección de correo electrónico no será publicada. Los campos necesarios están marcados *

CSSLab