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.